div中文字，图片居中对齐，兼容FF、IE

 

2010年07月21日 星期三 20:11

垂直居中对table来说是小菜一碟，只需指定单元格为vertical-align: middle即可，但这在css布局中不管用。假设你将一个导航菜单的高度设为2em，然后在css中指定垂直对齐的规则，文字还是会被排到盒的顶部，根本没有什么区别。

兼容FF、IE的图片居中对齐方法;

.aaa {
height: 120px;
width: 120px;
border: 1px solid #009933;
display: table-cell;     vertical-align:middle;           /* FF中图片垂直居中 */
text-align:center;
}
.aaa img {
vertical-align:middle;
margin-top: expression((120-this.height)/2);           /* IE中图片垂直居中 */
}

在div中，文字对齐很好解决，不过图片垂直居中就有点难度了。。。解决文本垂直居中 ，一个line-height 就解决了, 例如：

.div { width: 500px ; height : 200px ; line-height : 200px; background : #F4E9FC;}

图片居中问题 ，这个方法还可以，IE 里浏览正常，不过火狐就不支持了，因为用了 expression例如： css代码如下：

div1 { width: 500px; height: 500px; background : #F4E9FC; text-align: center;}
.div1 img { margin-top: expression((500-this.height)/2); }

html中：

<div class="class1">< img src="图片路径" /></div>

/*非IE的主流浏览器识别的垂直居中的方法*/

<style>
.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;
}
</style>