CSS: how to align images vertically bottom

Question

Hi all,

I have this code:

<ol><li><a href=""><span><img src="/images/sized/images/uploads/books/book_1.jpg" width="100" height="165"  alt="" /></span>
  </a> </li>
<li><a href=""><span><img src="/images/sized/images/uploads/books/book_2.jpg" width="100" height="130"  alt="" /></span>
  </a> </li></ol>

How do I align the images vertically bottom? (the images have various heights)

Answer 1

You need to vertical-align both the li and the img, and make the li as high as the tallest image. And for semantic's sake, please remove the unnecessary spans.

li 
{
    float: left; 
    width: 100px; 
    height: 165px; 
    vertical-align: bottom
}

li img 
{
    vertical-align: bottom
}

Answer 2

If you want the images to "hang" below the rest of the text in the list, you only need to align the image:

img { vertical-align: top; }

Keep in mind that this looks terrible with multiple lines of text: the next line will start underneath the image, which is really far on a 165px high image, but if you only have a short line (or nothing) then it looks fine.