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

你需要垂直对齐li和img，并使li与最高的图像一样高。出于语义考虑，请删除不必要的跨度。

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

li img 
{
    vertical-align: bottom
}

Answer 3

为display: inline-block;元素设置li： working example

虽然请记住，它在lte IE7中不起作用。

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

3 个答案: