CSS: как выровнять изображения по вертикали

Question

У меня есть этот код:

<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>

Как выровнять изображения по вертикали снизу? (изображения имеют различную высоту)

Answer 1

Попробуйте это

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

надеюсь, это поможет вам. Спасибо.

Answer 2

Просто установите display: inline-block; для li элементов: рабочий пример

Хотя имейте в виду, что в IE7 он не будет работать.

Answer 3

Вам необходимо выровнять по вертикали как li, так и img, и сделать li таким же высоким, как самое высокое изображение. И ради семантики, пожалуйста, удалите ненужные промежутки.

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

li img 
{
    vertical-align: bottom
}