使用CSS在锚点内垂直对齐图像

罗伯

我想在锚元素内垂直对齐图像,如下所示:

<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

更新:我已经更新了塞子。文本垂直对齐可以正常工作,但对于图像仍然不起作用。

拉希尔·瓦齐尔(Rahil Wazir)

试试这个:

.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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章