Html 使用 CSS 在锚点内垂直对齐图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20700475/
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
Vertical align image inside an anchor with CSS
提问by Rober
I would like to vertical align an image inside an anchor element like this:
我想垂直对齐锚元素内的图像，如下所示：
<ul class="thumbnails">
<li class="span2">
<a href="#" class="thumbnail">
<img src="http://www.forodefotos.com/attachments/barcos/17639d1298388532-barcos-vapor-antiguos-barcos-antiguos-vapor-mercantes.jpg" style="max-height: 150px">
</a>
</li>
</ul>
I have read many posts but none of them works for me. I′m also using a Bootstrap thumbnails class, I don′t know if this is related and it′s the reason it doesn't work.
我已经阅读了很多帖子，但没有一个对我有用。我也在使用 Bootstrap 缩略图类，我不知道这是否相关，这就是它不起作用的原因。
I have read I can do it setting a line-height but something is wrong.
我已经读过我可以设置行高，但是出了点问题。
Please see a simple plunker.
请看一个简单的plunker。
http://plnkr.co/edit/DsQ80oEiHFn4ma4qfNW8
http://plnkr.co/edit/DsQ80oEiHFn4ma4qfNW8
UPDATE:I have updated the plunker. Text vertical align is working ok, but it still doesn′t work for images.
更新：我已经更新了plunker。文本垂直对齐工作正常，但它仍然不适用于图像。
回答by Rahil Wazir
Try this:
尝试这个：
.thumbnail {
line-height: 150px; // height taken from OPs plunker
}
.thumbnail img {
margin: auto;
vertical-align: middle;
display: inline-block;
}
Add display: inline-block;and set the line-heightto the parent anchor element to middle align images vertically.
添加display: inline-block;并设置line-height父锚元素以垂直居中对齐图像。
