乌徒帮技术范技术中心CSS样式表 › div中利用css使图片垂直居中

div中利用css使图片垂直居中

分类:CSS样式表

在div中要让文字居中,只需要利用height和line-height相互配合即可实现文字垂直居中,但要让图片垂直居中,却很麻烦,要么通过高度宽度的精确计算,利用margin等属性进行位置安排,要么就看看本文的解决办法吧。

在table中,我们可以使用valign实现内部元素的垂直居中,但在div中却未提供完整的该属性。我们可以通过下面的方法来实现在div 中利用css使图片垂直居中

.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
}

我们看到,主要是利用了新的css规则中的vertical-align:middle; 同时使用display: table-cell;使div表格化。只不过在IE中不支持该属性,以至于需要一些辅助的方法。

<div class="box">
<img src="XXX" />
</div>

填写个人信息,赶快回复吧!