使用CSS垂直对齐图像 [英] Vertical align image inside an anchor with CSS
问题描述
我想垂直对齐一个锚点元素内的图像,像这样:
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>
我已经阅读了很多帖子,但没有一个适合我。我也使用Bootstrap缩略图类,我不知道这是否相关,这是它不工作的原因。
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.
我读了我
请看一个简单的plunker。
Please see a simple plunker.
< a href =http://plnkr.co/edit/DsQ80oEiHFn4ma4qfNW8> http://plnkr.co/edit/DsQ80oEiHFn4ma4qfNW8
UPDATE:
我更新了plunker。
UPDATE: I have updated the plunker. Text vertical align is working ok, but it still doesn´t work for images.
推荐答案
尝试此操作:
.thumbnail {
line-height: 150px; // height taken from OPs plunker
}
.thumbnail img {
margin: auto;
vertical-align: middle;
display: inline-block;
}
添加 display:inline-block;
并将 line-height
设置为父锚点元素以垂直对齐图像。
Add display: inline-block;
and set the line-height
to the parent anchor element to middle align images vertically.
a href =http://plnkr.co/edit/b5jEtK5EWVglrhEkj14e?p=preview>实例
LIVE EXAMPLE
这篇关于使用CSS垂直对齐图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!