CSS：如何在底部垂直对齐图像

我有以下代码：

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

---

如何在底部垂直对齐图像？（图像具有不同的高度）

您需要垂直对齐li和img，并使li与最高的图像一样高。为了语义起见，请删除不必要的跨距

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

li img 
{
    vertical-align: bottom
}

---

只需设置

显示：内联块对于
li
元素：

尽管请记住，它在lte IE7中不起作用。
试试这个

Css

html





工作示例

希望这对你有帮助。
谢谢。
vertical align
需要文本才能工作，因此您可以执行以下操作：
li:：after{content:“.”可见性：hidden；}
li{
    width:300px;
    height:300px;
    background:yellow;
    text-align:center;
    list-style-type:none;
    margin-bottom:10px;
    display:table-cell;
    vertical-align:bottom;
}

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