经常会遇到这个问题:在最外层盒子模型不方便设置宽度的情况下,缩小放大窗口时,希望盒子模型也能继续水平居中。特别是在做移动端页面的时候,如果给外层盒子模型设置宽高,会多出很多代码。
例子:
图中(三个固定宽高的黄色背景盒子)被(不固定宽高的红色背景盒子box)所包裹。div标签另有作用,后面会讲到。
1 <div> 2 <ul id="box"> 3 <li>1</li> 4 <li>2</li> 5 <li>3</li> 6 </ul> 7 </div>
<style> /*公共样式*/ body,ul { padding:0; margin:0; } body { background:#ccc; } div { width:100%; text-align:center; margin-top:50px;} li { list-style:none; float:left; width:100px; height:50px; background:yellow; text-align:center; line-height:50px; } li:nth-of-type(1),li:nth-of-type(2){ margin-right:20px; } ul { background:red; } </style>
/*盒子模型处理*/ #box {overflow:hidden;}
首先:三个黄色盒子设置左浮动,我们需要给box盒子设置overflow:hidden; 来清除浮动带来的影响。
这时我们会发现,box盒子被里面的黄色盒子撑起了宽高,不过box的宽默认为100%;这时候给box盒子设置margin:auto; 是无法使box盒子居中显示。
/*盒子模型处理*/#box {overflow:hidden; display:inline-block; }
我所做的处理是给box盒子设置成(inline-block;) 这样box盒子就有了子集的总宽度(内联元素包裹块级元素是不符合标准,但是并不会报错、出现问题。)
因为:box盒子已经变成了内联模块,我们只需要在最外层的div上面加个(text-align:center;)就可以实现box盒子水平居中了。
如果你有更好的方法,欢迎一起交流讨论。
时间: 2024-08-06 17:15:43