当容器的高度height与容器的字体大小font-size比值约为1.14的时候，可以实现图片在IE下垂直居中。
IE下条件：height/font-size≈1.14
IE下需要另外附加图片样式：img{vertical-align:middle}
FF下条件：vertical-align:middle; display:table-cell;
示例:
<!--
.test{
height:56px;
border:#aaaaaa 2px solid;
text-align:center;
font-size:49px; /*56/49≈1.14*/
vertical-align:middle;
display:table-cell;
width:96px;
}
.test img{
vertical-align:middle;
}
-->
<div class="test"><img src="images/small4.jpg" alt="测试图片" /></div>运行代码查看演示效果：
<!--
.test{
height:56px;
border:#aaaaaa 2px solid;
text-align:center;
font-size:49px;
vertical-align:middle;
display:table-cell;
width:96px;
}
.test img{
vertical-align:middle;
}
-->
图片垂直居中
<div class="test"><img src="images/small4.jpg" alt="测试图片" /></div>
| 浙ICP备09076741号
Leave a Reply