时间:2014-01-29所属栏目: Html+css 来源: 热度:
标题提到的“图片垂直居中解决方案”指得是怿飞blog提到的方法,详见:
图片垂直居中的使用技巧,
目前这种方法也算是解决图片垂直居中的主流方法,但是大家会发现IE6下图片底边被截去了1px,触发原因未知
所以针对IE6
_vertical-align:top;
完整代码
.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
_vertical-align:top;/*add, 修复IE6下图片底边被截去了1px bug*/
*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 #ff0000;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
}