利用table-cell实现图片垂直居中

2017-04-05 分类：HTML/CSS / 前端设计阅读(4345) 评论(0)

利用table-cell实现居中，font-size做兼容兼容IE6+/FF/Chrome，代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>图片垂直居中(兼容各主流浏览器，含IE6/IE7)</title>
        <style media="screen">
            /* 样式 */
            .box-1{ display:table;}
            .img-wrap-1{ display:table-cell; width:200px; height:200px; border:1px solid #ccc; text-align:center; *font-size:178px; zoom:1; vertical-align:middle;}
            /* height与font-size之比大约为：1:0.893; zoom:1是为了触发IE的hasLayout */
        </style>
    </head>
    <body>
        <p>利用table-cell实现居中，font-size做兼容兼容IE6+/FF/Chrome</p>
        <div class="box-1">
            <a class="img-wrap-1" href="#">
                <img src="images/1.png" alt="" />
            </a>
        </div>
    </body>
</html>

赞(157) 打赏

未经允许，不得转载本站任何文章：智言个人博客 » 利用table-cell实现图片垂直居中