06月

10

[译]通过CSS居中图片

文章分类：css  查看次数：365 + 87

原文地址：click here

这里有一个办法可以解决图片的垂直居中同时水平居中，前提是知道容器的高度，兼容FF,IE6,IE7

HTML：

<div class="container">
    <img src="pearbook.png" />
</div>
 

对于一般的浏览器

.container {
    height: 200px;
    width: 300px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border: 1px solid red;
}
.contain img {
    vertical-align: middle;
}
 

对IE另作处理

<!–[if IE]>
<style type="text/">
    .container {
        font-size: 181px;
    }
</style>
<![endif]–>
 

这段代码对于不是IE的浏览器不会起作用。
或许你会问，181px是怎么来的，这是DIV的高度乘以0.905得到的。听起来是不是有些不可思议，但确实很有效。

测试页面：click here

相关文章

评论

发表评论