html – 使用CSS垂直对齐图像

前端之家收集整理的这篇文章主要介绍了html – 使用CSS垂直对齐图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想垂直对齐一个锚点元素中的图像,如下所示:
  1. <ul class="thumbnails">
  2. <li class="span2">
  3. <a href="#" class="thumbnail">
  4. <img src="http://www.forodefotos.com/attachments/barcos/17639d1298388532-barcos-vapor-antiguos-barcos-antiguos-vapor-mercantes.jpg" style="max-height: 150px">
  5. </a>
  6. </li>
  7. </ul>

我读了很多帖子,但都没有为我工作.我也使用Bootstrap缩略图类,我不知道这是否相关,这是它不起作用的原因.

我已经阅读我可以做到设置一个线高,但有些是错误的.

请看一个简单的空间.

http://plnkr.co/edit/DsQ80oEiHFn4ma4qfNW8

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

解决方法

尝试这个:
  1. .thumbnail {
  2. line-height: 150px; // height taken from OPs plunker
  3. }
  4. .thumbnail img {
  5. margin: auto;
  6. vertical-align: middle;
  7. display: inline-block;
  8. }

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

LIVE EXAMPLE

猜你在找的HTML相关文章