Vertical Align Multiple Image with Different Height

Vertical align multiple image with different height

Here you go.

WORKING DEMO

The HTML:

<div id="author-sorter">
    <div class="jcarousel-container jcarousel-container-horizontal" style="position: relative; display: block;">
        <div class="jcarousel-clip jcarousel-clip-horizontal" style="overflow: hidden; position: relative;">
            <ul class="pagination jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; left: 0px; margin: 0px; padding:  0px; width: 902px; display:table-row;">
                <li class="now jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" style="width: 82px;" jcarouselindex="1"><a href="?author_id=43" id="43"><img width="46" height="48" class="wp-user-avatar wp-user-avatar-48 alignhttp://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="Alterre Bourgogne" src="http://rare.lfdb.fr/files/2013/08/Alterre_logo.gif"><span class="arrow"></span></a>

                </li>
                <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-2 jcarousel-item-2-horizontal" style="float: left; list-style: none outside none; width: 82px;" jcarouselindex="2"><a href="?author_id=51" id="51"><img width="48" height="15" class="wp-user-avatar wp-user-avatar-48 alignhttp://1.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="ARPE PACA" src="http://rare.lfdb.fr/files/2013/08/Logo_ARPE-PACA_2010_BD-150x49.jpg"><span class="arrow"></span></a>

                </li>
                <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal" style="float: left; list-style: none outside none; width: 82px;" jcarouselindex="3"><a href="?author_id=50" id="50"><img width="48" height="29" class="wp-user-avatar wp-user-avatar-48 alignhttp://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="AREC Poitou-Charentes" src="http://rare.lfdb.fr/files/2013/08/AREC_logo-150x91.gif"><span class="arrow"></span></a>

                </li>
                <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-4 jcarousel-item-4-horizontal" style="float: left; list-style: none outside none; width: 82px;" jcarouselindex="4"><a href="?author_id=47" id="47"><img width="48" height="38" class="wp-user-avatar wp-user-avatar-48 alignhttp://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="AREHN" src="http://rare.lfdb.fr/files/2013/08/Arehn_logo.gif"><span class="arrow"></span></a>

                </li>
                <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-5 jcarousel-item-5-horizontal" style="float: left; list-style: none outside none; width: 82px;" jcarouselindex="5"><a href="?author_id=48" id="48"><img width="48" height="32" class="wp-user-avatar wp-user-avatar-48 alignhttp://1.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="ARENE Ile-de-France" src="http://rare.lfdb.fr/files/2013/08/ARENE_logo2009-150x102.gif"><span class="arrow"></span></a>

                </li>
                <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-6 jcarousel-item-6-horizontal" style="float: left; list-style: none outside none; width: 82px;" jcarouselindex="6"><a href="?author_id=52" id="52"><img width="48" height="48" class="wp-user-avatar wp-user-avatar-48 alignhttp://1.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="ARER" src="http://rare.lfdb.fr/files/2013/08/Logo-arer-150x150.jpg"><span class="arrow"></span></a>

                </li>
                <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-7 jcarousel-item-7-horizontal" style="float: left; list-style: none outside none; width: 82px;" jcarouselindex="7"><a href="?author_id=44" id="44"><img width="48" height="48" class="wp-user-avatar wp-user-avatar-48 alignhttp://1.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="ARPE Midi-Pyrénées" src="http://rare.lfdb.fr/files/2013/08/ARPE_logosimple-150x150.jpg"><span class="arrow"></span></a>

                </li>
                <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-8 jcarousel-item-8-horizontal" style="float: left; list-style: none outside none; width: 82px;" jcarouselindex="8"><a href="?author_id=49" id="49"><img width="48" height="31" class="wp-user-avatar wp-user-avatar-48 alignhttp://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="CERDD" src="http://rare.lfdb.fr/files/2013/08/CERDD_Logo2004.jpg"><span class="arrow"></span></a>

                </li>
                <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-9 jcarousel-item-9-horizontal" style="float: left; list-style: none outside none; width: 82px;" jcarouselindex="9"><a href="?author_id=46" id="46"><img width="31" height="48" class="wp-user-avatar wp-user-avatar-48 alignhttp://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="OEC" src="http://rare.lfdb.fr/files/2013/08/OEC-98x150.jpeg"><span class="arrow"></span></a>

                </li>
                <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-10 jcarousel-item-10-horizontal" style="float: left; list-style: none outside none; width: 82px;" jcarouselindex="10"><a href="?author_id=53" id="53"><img width="48" height="24" class="wp-user-avatar wp-user-avatar-48 alignhttp://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="RAEE" src="http://rare.lfdb.fr/files/2013/08/RAEE_logo.jpg"><span class="arrow"></span></a>

                </li>
                <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-11 jcarousel-item-11-horizontal" style="float: left; list-style: none outside none; width: 82px;" jcarouselindex="11"><a href="?author_id=45" id="45"><img width="48" height="27" class="wp-user-avatar wp-user-avatar-48 alignhttp://1.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="RARE" src="http://rare.lfdb.fr/files/2013/08/LogoRARE-e1377163403654.png"><span class="arrow"></span></a>

                </li>
            </ul>
        </div>
        <div class="jcarousel-prev jcarousel-prev-horizontal" style="display: block;"></div>
        <div class="jcarousel-next jcarousel-next-horizontal" style="display: block;"></div>
    </div>
</div>

The CSS:

#author-sorter {
    padding: 20px 30px;
    margin-right: 2px;
    width:900px;
}
#author-sorter > * {
    vertical-align: middle;
}
#author-sorter ul li {
    float: left;
}
#author-sorter ul li a {
    width: 48px;
    height:48px;
    display: table-cell;
vertical-align: middle;
}
#author-sorter ul li a:hover img, #author-sorter ul li.now a img {
    border: 1px solid #bcd001;
    width: 48px;
}
#author-sorter ul li.now {
    position:relative;
    vertical-align: middle;
display: table-cell;
}

Hope this helps.

CSS vertical align with different image heights

These codes will guide you. and for bottom section can use flex too (width=50%) there is no need for float left.

.main-wrapper {
  border: 1px solid red;
  width: 75%;
  margin: 0 auto 0 auto;
}

.main-wrapper .p-c-top {
  display: flex;
  width: 100%;
}

.main-wrapper .p-c-top .content-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
  width: 33.333%;
}

.main-wrapper .p-c-top .content-col img {
  width: 100%;
}
 <div class="main-wrapper">
        <div class="p-c-top">
            <div class="content-col">
                <img src="https://ir-uk.amazon-adsystem.com/e/ir?t=lawncarepro-21&language=en_GB&l=li2&o=2&a=B0099LETKS" alt="Sample Image">
            </div>
            <div class="content-col">
               <h4>overal value</h4>
               <p>stars</p>
            </div>
            <div class="content-col">
               <h4>price</h4>
               <p><a href="#">check on amazon</a></p>
            </div>
        </div>
        <div class="p-c-bot"></div>
    </div>

Vertically align multiple p with respect to image height

use 

float:left

for both image and p tags.
then 

margin-top

the p tag to your wish.

http://jsfiddle.net/LBUyS/3/

How do i align two pictures with different heights HTML

you can use flexbox: 

<div class="images-flex">
     <img src="../oppettider.gif" width="" height="500" alt="Sample Image"/>
     <img src="la-carte-förrätter.gif" width="680" height="2608" alt="Sample Image"/>
</div>

then in css: 

.images-flex {
  display: flex;
  align-items: flex-start;
}

Align multiple Images (vertically aligned to the middle) with captions aligned along the baseline

So I did the following to your code:

  1. Remove the baseline alignment for image-row

  2. Make the figures a column flexbox and apply these styles:

    .product-block figure {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .product-block figure img {
      border: 1px solid red;
      margin-top:auto;
    }
    .product-block figure figcaption {
      margin-top:auto;
    }

Have also added a border around the image for illustration. Let me know your feedback on this, thanks!

Demo below:

.image-row {  display: -webkit-box;  display: -moz-box;  display: -ms-flexbox;  display: -webkit-flex;  display: flex;  /*  -ms-flex-align: baseline;  -webkit-align-items: baseline;  align-items: baseline;  -webkit-box-align: baseline;  -moz-box-align: baseline;  */}.new-products {  text-align: center;}.product-block .category,.product-block .category-special {  font-size: .75em;  font-weight: 600;}.product-block {  margin: 0 0 2em;}.product-block span {  display: block;}.product-block .category,.product-block .category-special {  font-size: 1em;  font-weight: 600;  letter-spacing: .063em;  text-transform: uppercase;}.product-block .category {  color: #b10832;}.product-block figure {  display: flex;  flex-direction: column;  height: 100%;}.product-block figure img {  border: 1px solid red;  margin-top:auto;}.product-block figure figcaption {  margin-top:auto;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><section class="new-products container">  <div class="image-row">    <!--PRODUCT BLOCK-->    <div class="product-block col-lg-4 col-md-4 col-xs-12">      <figure>        <img src="https://s21.postimg.org/wr1wb9z0n/test2.jpg" class="img-responsive" alt="Foto Producto">        <figcaption>          <span class="category">category</span>          <span class="product-name">Product Name</span>          <span span="" class="price">price 6€</span>        </figcaption>      </figure>    </div>    <!--PRODUCT BLOCK END-->    <!--PRODUCT BLOCK-->    <div class="product-block col-lg-4 col-md-4 col-xs-12">      <figure>        <img src="https://s21.postimg.org/z9nlbykqv/test1.jpg" class="img-responsive" alt="Foto Producto">        <figcaption>          <span class="category">category</span>          <span class="product-name">Product Name</span>          <span span="" class="price">price 6€</span>        </figcaption>      </figure>    </div>    <!--PRODUCT BLOCK END-->    <!--PRODUCT BLOCK-->    <div class="product-block col-lg-4 col-md-4 col-xs-12">      <figure>        <img src="https://s21.postimg.org/h84ge5qpz/test3.jpg" class="img-responsive" alt="Foto Producto">        <figcaption>          <span class="category">category</span>          <span class="product-name">Product Name</span>          <span span="" class="price">price 6€</span>        </figcaption>      </figure>    </div>    <!--PRODUCT BLOCK END-->  </div>  </div>

How to vertically align an image inside a div

The only (and the best cross-browser) way as I know is to use an inline-block helper with height: 100% and vertical-align: middle on both elements.

So there is a solution: http://jsfiddle.net/kizu/4RPFa/4570/

.frame {    height: 25px;      /* Equals maximum image height */    width: 160px;    border: 1px solid red;    white-space: nowrap; /* This is required unless you put the helper span closely near the img */
    text-align: center;    margin: 1em 0;}
.helper {    display: inline-block;    height: 100%;    vertical-align: middle;}
img {    background: #3A6F9A;    vertical-align: middle;    max-height: 25px;    max-width: 160px;}
<div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px /></div><div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px /></div><div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px /></div><div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px /></div><div class="frame">    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=17px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=15px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=13px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=11px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=9px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=7px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=5px /></div><div class="frame">    <span class="helper"></span>    <img src="http://jsfiddle.net/img/logo.png" height=3px /></div>

Vertically align multiple images within a div

No need for any line height css. You can vertically align divs using the display:table and display:table-cell styles. The height of .ButtonBarDiv has been exaggerated to show that they both center vertically.

One image per line:
http://jsfiddle.net/eY7Ms/16/

Images on the same line:
http://jsfiddle.net/eY7Ms/14/

Vertically align an image inside a div with responsive height

Here is a technique to align inline elements inside a parent, horizontally and vertically at the same time:

Vertical Alignment

1) In this approach, we create an inline-block (pseudo-)element as the first (or last) child of the parent, and set its height property to 100% to take all the height of its parent.

2) Also, adding vertical-align: middle keeps the inline(-block) elements at the middle of the line space. So, we add that CSS declaration to the first-child and our element (the image) both.

3) Finally, in order to remove the white space character between inline(-block) elements, we could set the font size of the parent to zero by font-size: 0;.

Note: I used Nicolas Gallagher's image replacement technique in the following.

What are the benefits?

  • The container (parent) can have dynamic dimensions.

  • There's no need to specify the dimensions of the image element explicitly.

  • We can easily use this approach to align a <div> element vertically as well; which may have a dynamic content (height and/or width). But note that you have to re-set the font-size property of the div to display the inside text. Online Demo.

<div class="container">
    <div id="element"> ... </div>
</div>
.container {
    height: 300px;
    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.container:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}

#element {
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    font: 16px/1 Arial sans-serif;        /* <-- reset the font property */
}

The output

Vertically align an element in its container

Responsive Container

This section is not going to answer the question as the OP already knows how to create a responsive container. However, I'll explain how it works.

In order to make the height of a container element changes with its width (respecting the aspect ratio), we could use a percentage value for top/bottom padding property.

A percentage value on top/bottom padding or margins is relative to the width of the containing block.

For instance:

.responsive-container {
  width: 60%;

  padding-top: 60%;    /* 1:1 Height is the same as the width */
  padding-top: 100%;   /* width:height = 60:100 or 3:5        */
  padding-top: 45%;    /* = 60% * 3/4 , width:height =  4:3   */
  padding-top: 33.75%; /* = 60% * 9/16, width:height = 16:9   */
}

Here is the Online Demo. Comment out the lines from the bottom and resize the panel to see the effect.

Also, we could apply the padding property to a dummy child or :before/:after pseudo-element to achieve the same result. But note that in this case, the percentage value on padding is relative to the width of the .responsive-container itself.

<div class="responsive-container">
  <div class="dummy"></div>
</div>
.responsive-container { width: 60%; }

.responsive-container .dummy {
  padding-top: 100%;    /*  1:1 square */
  padding-top: 75%;     /*  w:h =  4:3 */
  padding-top: 56.25%;  /*  w:h = 16:9 */
}

Demo #1.

Demo #2 (Using :after pseudo-element)

Adding the content

Using padding-top property causes a huge space at the top or bottom of the content, inside the container.

In order to fix that, we have wrap the content by a wrapper element, remove that element from document normal flow by using absolute positioning, and finally expand the wrapper (bu using top, right, bottom and left properties) to fill the entire space of its parent, the container.

Here we go:

.responsive-container {
  width: 60%;
  position: relative;
}

.responsive-container .wrapper {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

Here is the Online Demo.

Getting all together

<div class="responsive-container">
  <div class="dummy"></div>

  <div class="img-container">
    <img src="http://placehold.it/150x150" alt="Sample Image">
  </div>
</div>
.img-container {
  text-align:center; /* Align center inline elements */
  font: 0/0 a;       /* Hide the characters like spaces */
}

.img-container:before {
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.img-container img {
  vertical-align: middle;
  display: inline-block;
}

Here is the WORKING DEMO.

Obviously, you could avoid using ::before pseudo-element for browser compatibility, and create an element as the first child of the .img-container:

<div class="img-container">
    <div class="centerer"></div>
    <img src="http://placehold.it/150x150" alt="Sample Image">
</div>
.img-container .centerer {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

UPDATED DEMO.

Using max-* properties

In order to keep the image inside of the box in lower width, you could set max-height and max-width property on the image:

.img-container img {
    vertical-align: middle;
    display: inline-block;
    max-height: 100%;  /* <-- Set maximum height to 100% of its parent */
    max-width: 100%;   /* <-- Set maximum width to 100% of its parent */
}

Here is the UPDATED DEMO.

How to align rows of images of different heights?

Define the height for the div and apply max-height for the images:

.row > div{
  width: 200px;/*example only*/
  height: 300px;/*example only*/
}
.row > div img{
  max-height: 100%;
}

How do I align images in a row all vertically aligned in the middle no matter what height and with a fluid width?

I think this is what you're asking for.

.container > div {  display: inline;}.container img {  max-width: 100%;  vertical-align: middle;}
<div class="container">  <div>    <img src="http://lorempixel.com/100/75/" />  </div>  <div>    <img src="http://lorempixel.com/100/175/" />  </div>  <div>    <img src="http://lorempixel.com/100/25/" />  </div>  <div>    <img src="http://lorempixel.com/150/125/" />  </div></div>

Related Topics

Changing Rotation of Mat Expansion Indicator

How to Create a Partial Border(With a Hole)

Merge Ttf Font Files (For Using in CSS)

Netbeans CSS Not Hinting All Properties

Responsive Transparent Overlapping CSS Circles with Text Align Vertical and Center

Animation Stop with CSS3

How to Add Horizontal Scrollbar in a React Bootstrap Table

Ie9-11 Detecting Transform-Style: Preserve-3D

How to Change The Style of: -Webkit-Autofill

Move The Vertical Scroll Bar of a Scroll Panel to The Left Side

Horizontally Centering Elements to Their Container While Avoiding Overlap

CSS on Material UI Components

Why Is My CSS Class Style Not Applying to Specific <Li>'s

CSS Animation Works in Chrome But Not Safari

Bootstrap 4 Square Grid

Chrome Is Now Blurring Text When Using Transform Translatey with Percent

How to Animate Element Again, After Animation-Fill-Mode: Forward

How Does "CSS Arrow" Work


Leave a reply



Submit