使用CSS垂直对齐锚内的图像

o75abkj4 于 2022-11-27 发布在其他

关注(0)|答案(2)|浏览(215)

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

<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缩略图类，我不知道这是否是相关的，这是它不工作的原因。
我已经读到我可以做到这一点设置一个行高度，但有什么是错误的。
请看一个简单的plunker。
http://plnkr.co/edit/DsQ80oEiHFn4ma4qfNW8

**更新：**我已经更新了plunker。文本垂直对齐工作正常，但它仍然不工作的图像。

css

来源：https://stackoverflow.com/questions/20700475/vertical-align-image-inside-an-anchor-with-css

2条答案

按热度按时间

yzuktlbb1#

试试这个：

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

添加display: inline-block;，并将line-height设置为父锚元素，以垂直居中对齐图像。
LIVE EXAMPLE

赞(0）回复(0）举报 2022-11-27

wz1wpwve2#

无固定行高的灵活布局解决方案：
添加div Package

<a href="#" class="thumbnail">
        <div class="d-flex justify-items-center">
           <img src="http://www.forodefotos.com/attachments/barcos/17639d1298388532-barcos-vapor-antiguos-barcos-antiguos-vapor-mercantes.jpg" style="max-height: 150px">
        </div>
    </a>

赞(0）回复(0）举报 2022-11-27

我来回答

使用CSS垂直对齐锚内的图像

2条答案

相关问题

热门标签

最新问答