Align list of images using CSS

Question

Hi,

I would like to align a list of images to 'bottom', how can I achieve this using CSS?

Background: I want a set of photos to be aligned to the bottom, the images are in different sizes.

<div>
  <ul>
    <li> <!-- image 1-->
    <li> <!-- image 2-->
    <li> <!-- image 3-->
  </ul>
</div>

Thanks.

Answer 1

ul{ li-style-type: none;}

li{position:relative; float: left; width:100px; height: 100px; }

li img { display: block; position: absolute; bottom: 0; }

Then

<ul> <li><img /></li>...</ul>

Answer 2

The following CSS should do the trick:

ul{ li-style-type: none;}

li img {position:absolute;bottom:0;}

li {float:left;vertical-align:bottom;}

Answer 3

Just try try this:

li img{
    position:absolute;
    bottom:0;
}
li{
    position:relative;
}

EDIT: I just read that they are intended to be aligned to the bottom of the li element. I updated the code so the img will be aligned to the bottom of the li element.

Answer 4

The problem with all this absolute positioning is that the li elements will have no height, since the image element is absolute and doesn't push any layout anymore. typically that's a bad solution.

Depending on what you need, this could work:

li {
  display: inline;
  vertical-align: bottom;
}

Live example here: http://mooshell.net/zBCGW/