日志

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

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

在img标签外包裹一个p标签,标准浏览器利用p标签的伪类属性:before来实现居中,另外,对于IE6/IE7使用了CSS表达式来实现兼容。html代码如下:【2017.12月更新】此方法因对搜索引擎不太友好,最新方法请看:CSS巧用Display:table实现图片垂直居中

在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:e­xpression((400 - this.height )/2);  /* CSS表达式用来兼容IE6/IE7 */
    vertical-align:middle;
    border:1px solid #ccc;
}

html代码如下:

<div id="box">
    <p>
        <img src="1.jpg">
    </p>
</div>

【2017.12月更新】此方法因对搜索引擎不太友好,最新方法请看:CSS巧用Display:table实现图片垂直居中

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