垂直居中解决方案，兼容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>