css 实现图片垂直居中

PHPABC CSS 929 次浏览 , 没有评论

当容器的高度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>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Go