CSS: how to align images vertically at the 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 to align images vertically below? (images have different heights)

Answer 1

try it

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> 

jsFiddle working example

hope this helps you. Thanks.

Answer 2

You need to vertically align both li and img, and make li as tall as possible. And for semantic sake, please remove unnecessary gaps.

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

Answer 3

Just set display: inline-block; for li elements: a working example

Although keep in mind that it will not work in IE7.