多个块级元素的居中

最新推荐文章于 2024-07-09 15:09:19 发布

十二页书

最新推荐文章于 2024-07-09 15:09:19 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/qwj515615152/article/details/78772314

版权

我们知道,当父元素属性设置为:

.wrapper{
            margin: 0 auto;
            text-align: center;
}

可以很方便的支持行内元素(display:inline)的居中,然而实际情况是页面设计时可能要让多个块元素(display:bolck),如div,等高度居中

此时的解决方案是设置设置为display:inline-block; 兼具inline的默认不换行和block的允许设置宽高,

注意IE6实际上也是支持display:inline-block; 的,但块元素使用时要补充zoom:1; 允许进行高度的布局

示例代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html charset=utf-8" />
    <script src="http://code.jquery.com/jquery-1.8.3.js">
    </script>
    <script type="text/javascript">
    </script>
    <style type="text/css">
    .wrapper {
        margin: 0 auto;
        text-align: center;
    }

    .wrapper div {
        display: inline-block;
        zoom: 1;
        width: 100px;
        height: 100px;
        background: blue;
        border: 1px solid black;
    }
    </style>
    <title>
        居中测试
    </title>
</head>

<body>
    <div class="wrapper">
        <!--span是内联元素/行内元素,可以两个靠在一起一起居中-->
        <div>div1</div>
        <div>--div2</div>
        <!--自动占满整行,所以第二个div移到下一行居中-->
    </div>
</body>

</html>

效果如图1.

同时有趣的是,div中填写的内容过长可能影响对齐,例如图二图三

图一

图二

图三

十二页书

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多个块级元素的居中

我们知道,当父元素属性设置为:.wrapper{ margin: 0 auto; text-align: center;}可以很方便的支持行内元素(display:inline)的居中,然而实际情况是页面设计时可能要让多个块元素(display:bolck),如div,等高度居中此时的解决方案是设置设置为display:inline-b
复制链接

扫一扫