一个简洁的图片垂直居中,不需要hack,不需要table-cell
废话不多说 上代码
HTML结构
<div id="imgwrap"> <img src="http://jiedemo.sinaapp.com/img/240.jpg"> <span></span> </div>
CSS
#imgwrap{ width:300px; height:400px; background:#f00; line-height: 400px; text-align: center; } #imgwrap img {vertical-align: middle;} #imgwrap span{ display:inline-block;}
点击这里查看DEMO
以上是hasylayout官网给出的解决方案 原文:http://haslayout.net/css/No-line-height-Vertical-Center-on-Images-Bug