个人博客
专注IT梦想的地方

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

利用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>
赞(4) 打赏
未经允许,不得转载本站任何文章:智言个人博客 » 利用table-cell实现图片垂直居中

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏