日志

首页 > Blog > 技术笔记 > 正文

CSS让图片垂直居中 兼容所有浏览器

在img标签外包裹一个p标签,标准浏览器利用p标签的伪类属性:before来实现居中,另外,对于IE6/IE7使用了CSS表达式来实现兼容。#box p{ width:500px;height:400px;

在img标签外包裹一个p标签,标准浏览器利用p标签的伪类属性:before来实现居中,另外,对于IE6/IE7使用了CSS表达式来实现兼容。

#box p{

   width:500px;height:400px;

   line-height:400px;  /* 行高等于高度 */

}

/* 兼容标准浏览器 */

#box p:before{

   content:".";  /* 具体的值与垂直居中无关,尽可能的节省字符 */

   margin-left:-5px; font-size:10px;  /* 修复居中的小BUG */

   visibility:hidden;  /*设置成隐藏元素*/

}


#box p img{

   *margin-top:expression((400 - this.height )/2);  /* CSS表达式用来兼容IE6/IE7 */

   vertical-align:middle;

   border:1px solid #ccc;

}


本网网址:http://www.bogoor.com/code/73.html