CSS：如何垂直对齐图像底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2324828/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: how to align images vertically bottom
提问by aeran
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)
如何垂直对齐图像底部？（图片有不同的高度）
回答by Roy Sonasish
Try this
尝试这个
Css
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
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
工作示例jsFiddle
hope this will help you. Thank you.
希望这会帮助你。谢谢你。
回答by Residuum
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 和 img，并使 li 与最高图像一样高。为了语义的缘故，请删除不必要的跨度。
li
{
float: left;
width: 100px;
height: 165px;
vertical-align: bottom
}
li img
{
vertical-align: bottom
}
回答by nd_macias
Just set display: inline-block;for lielements:
working example
只需display: inline-block;为li元素设置：
工作示例
Although keep in mind, that it won't work in lte IE7.
尽管请记住，它在 lte IE7 中不起作用。
