垂直居中解决方案，兼容ie6+

最新推荐文章于 2021-06-09 11:07:02 发布

u011263845

最新推荐文章于 2021-06-09 11:07:02 发布

阅读量2.3k

点赞数 1

分类专栏：前端开胃菜文章标签： ie 6 stylesheet 垂直居中

本文链接：https://blog.csdn.net/u011263845/article/details/51275148

版权

前端开胃菜专栏收录该内容

26 篇文章 0 订阅

订阅专栏

本来想发在博客上的。妈的最近博客抽风。文章发布老是有问题。哎

不想折腾。烦死人了。直接放个demo得了

垂直居中demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>垂直居中解决方案（兼容ie6+）</title>
    <link rel="stylesheet" href="http://www.zhangweiwei.cn/demo/reset.css">
    <style>
        .vertical-box {
            width: 198px;
            height: 198px;
            background-color: yellow;
            border: 1px red solid;
            text-align: center;
        }

        .vertical-box:after {
            content: '';
            display: inline-block;
            vertical-align: middle;
            height: 100%;
        }

        strong {
            display: block;
        }

        .content {
            display: inline-block;
            vertical-align: middle;
            *display: inline;
            *zoom: 1
        }

        .ie7 {
            width: 0;
            font-size: 0;
            height: 100%;
            display: inline-block;
            *display: inline;
            *zoom: 1;
            vertical-align: middle;
        }
    </style>
</head>

<body>

    <div class="vertical-box">
        <div class="content">
            <img src="http://prototype.ui.sh.ctriptravel.com/git/Flight/online/master/offline/trade_sharing/images/add_pic.png" alt="">
            <strong>添加图片</strong>
        </div>
        <i class="ie7"></i>
    </div>



    <script>
        console.log("just for fun")
    </script>
</body>

</html>

原理是：都显示为行框的高度由最高的行内框决定。

ie7作为演员，高度指定和父元素一致。

兼容性：支持inline-block的浏览器均可。

对于IE6/7，可以先使用hack方式使其支持 inline-block后，使用此方法实现垂直居中。

其他方法很多用这个也是可以解决的，table table-cell等。道理一样。

u011263845

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
垂直居中解决方案，兼容ie6+

本来想发在博客上的。妈的最近博客抽风。文章发布老是有问题。哎不想折腾。烦死人了。直接放个demo得了垂直居中demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>垂直居中解决方案（兼容ie6+）</title> <link rel="stylesheet" href="http://w
复制链接

扫一扫