如何保证在IE和火狐等主流浏览器让图片在块级元素中左右，上下居中显示

最新推荐文章于 2021-06-04 01:34:40 发布

salestina

最新推荐文章于 2021-06-04 01:34:40 发布

阅读量582

点赞数 1

文章标签：浏览器图片火狐 ie 图片居中

本文链接：https://blog.csdn.net/salestina/article/details/50184185

版权

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>方法3 - 未知高度的图片垂直居中 - www.cleanthem.com</title>

<style type="text/css">
body {
    height:100%; margin:0; padding:0;
}
#box{
    width:500px;height:400px;
    text-align:center;
    border:1px solid #d3d3d3;background:#fff;
}
#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;
}
</style>

</head>

<body>
<div id="box">
    <p><img src="right_logo.jpg" alt="" /></p>
</div>

</body>

</html>

此代码经过本人测试，在主流浏览器里都有效、