图片垂直居中解决方案的补充

时间: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;
  } 
  
标签:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)