使用CSS垂直对齐图像

本文介绍了使用CSS垂直对齐图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我想垂直对齐一个锚点元素内的图像，像这样：I would like to vertical align an image inside an anchor element like this:<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缩略图类，我不知道这是否相关，这是它不工作的原因。I have read many posts but none of them works for me. I´m also using a Bootstrap thumbnails class, I don´t know if this is related and it´s the reason it doesn't work.我读了我请看一个简单的plunker。Please see a simple plunker. http://plnkr.co/edit/DsQ80oEiHFn4ma4qfNW8 UPDATE： 我更新了plunker。UPDATE:I have updated the plunker. Text vertical align is working ok, but it still doesn´t work for images.推荐答案尝试此操作：.thumbnail { line-height: 150px; // height taken from OPs plunker}.thumbnail img { margin: auto; vertical-align: middle; display: inline-block;}添加 display：inline-block; 并将 line-height 设置为父锚点元素以垂直对齐图像。Add display: inline-block; and set the line-height to the parent anchor element to middle align images vertically. a href =http://plnkr.co/edit/b5jEtK5EWVglrhEkj14e?p=preview>实例LIVE EXAMPLE 这篇关于使用CSS垂直对齐图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！