html - 使用 CSS 在 anchor 内垂直对齐图像

Question

我想像这样在 anchor 元素内垂直对齐图像:

<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。文本垂直对齐工作正常，但它仍然不适用于图像。

Answer 1

试试这个:

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

添加 display: inline-block; 并设置 line-height 到父 anchor 元素以垂直居中对齐图像。

LIVE EXAMPLE