WonderCSS

突破容器边框,让图片真正的水平居中!

对于WEB编写谈到图片水平居中对齐时我们的第一反应都是用 text-align:center 解决,但这种对齐有个局限,就是图片受限于外层的容器尺寸大小。如果你的图片宽度大于外层容器宽度,那么text-align:center是失效的,因为它无法做到让容器的中线和图片的中线对齐。

那么如何能让图片突破容器边框,真正的达到水平居中呢?借助于分析Wordpress媒体库的代码我们找到了这样的一种方法:首先我们需要在图片与外层容器间再嵌套一层容器实现再平衡,然后我们这个方法我们需要使用CSS3的新属性Transform来解决。

以如下 HTML 代码举例


<div class="imgbox">
    <div class="thumbnail">
        <img src="images.jpg" alt="" />
    </div>
</div>

直观的逻辑图示:

Thumbnail-Align-Center

这个方法的核心就是找到图片的中线,为此我们为图片多嵌套类一层 div 容器 .thumbnail 。通过让.thumbnail向右下移动50%,让图片左上移动50%来固定图片的中线,近而达到真正意义上的图片居中!


.thumbnail {
    line-height:0;
    -webkit-transform:translate(50%,50%);
    -moz-transform:translate(50%,50%);
    -ms-transform:translate(50%,50%);
    transform:translate(50%,50%);
}

.thumbnail img {
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
}

By 于湛 发布于 2013.05.22 8,387 次浏览

发表评论

电子邮件地址不会被公开。 必填项已用*标注