不定宽的浮动元素如何设置水平居中
对于定宽的非浮动元素我们可以在 CSS 中用 margin:0 auto 进行水平居中;对于不定宽的浮动元素,我们也有一个常用的技巧解决它的水平居中问题。
一、html 标记语言框架
<div class="wrap_clearfix">
......
<div class="inwrap">
<ul class="page">
<li>1</li>
<li>...</li>
</ul>
</div>
</div>
1.1、补充说明
- wrap_clearfix 元素包括列表页主要内容。
- inwrap 元素包括分页信息(对内容元素的封装);浮动元素,宽度不确定。
- page 元素包含分页信息;浮动元素,宽度不确定。
二、CSS 样式设置
.wrap_clearfix{position:relative; overflow:hidden;zoom:1;}
.wrap_clearfix:after { content:""; height:0; visibility:hidden; display:block; clear:both; }
.inwrap{ float:left; position:relative; left:50%;}
.page { float:left; position:relative; right:50%; }
2.1、补充说明
父元素和子元素同时左浮动,然后父元素相对左移动50%,再然后子元素相对右移动50%,或者子元素相对左移动-50%也就可以了。
