多个块级元素的居中

来源：互联网发布：mysql时间戳转换编辑：程序博客网时间：2024/06/08 12:13

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

.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中填写的内容过长可能影响对齐,例如图二图三

图一

图二

图三

阅读全文

0 0