不定宽的浮动元素如何设置水平居中

2015-01-11 0 By admin

对于定宽的非浮动元素我们可以在 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、补充说明

  1. wrap_clearfix 元素包括列表页主要内容。
  2. inwrap 元素包括分页信息(对内容元素的封装);浮动元素,宽度不确定。
  3. 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%也就可以了。

CSS 设置不定宽浮动元素水平居中
CSS 设置不定宽浮动元素水平居中