html – 使用CSS垂直对齐图像

发布时间：2020-12-14 23:49:18 所属栏目：资源来源：网络整理

导读：我想垂直对齐一个锚点元素中的图像,如下所示： 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.j

我想垂直对齐一个锚点元素中的图像,如下所示：

<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

更新：
我已经更新了plunker.文本垂直对齐工作正常,但它仍然不适用于图像.

解决方法

尝试这个：

.thumbnail {
    line-height: 150px; // height taken from OPs plunker
}
.thumbnail img {
   margin: auto;
   vertical-align: middle; 
   display: inline-block;
}

添加显示：inline-block;并将线高设置为父锚点元素,以便垂直对齐图像.

LIVE EXAMPLE

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!