我想在锚元素内垂直对齐图像,如下所示:
<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缩略图类,我不知道这是否相关,这是它不起作用的原因。
我已经读过,我可以设置行高,但是出了点问题。
请看一个简单的矮人。
http://plnkr.co/edit/DsQ80oEiHFn4ma4qfNW8
更新:我已经更新了塞子。文本垂直对齐可以正常工作,但对于图像仍然不起作用。
试试这个:
.thumbnail {
line-height: 150px; // height taken from OPs plunker
}
.thumbnail img {
margin: auto;
vertical-align: middle;
display: inline-block;
}
添加display: inline-block;
并将其设置line-height
为父锚元素,以使图像垂直居中对齐。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句