CSS: how to align images vertically bottom

Question

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

Try this

Css

li{
    width:300px;
    height:300px;
    background:yellow;
    text-align:center;
    list-style-type:none;
    margin-bottom:10px;
    display:table-cell;
    vertical-align:bottom;
}

html

<ul>
    <li><img src="http://2.imimg.com/data2/LQ/QV/MY-/teddy-small-size-250x250.jpg" width="250" height="250" /></li>
</ul>

working example jsFiddle

hope this will help you. Thank you.

Answer 2

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
}