如何让浮动的元素水平居中

为什么会出现浮动元素呢？简单点，比如说，块级元素表示的列表，默认的，每行列表都独占一行显示，如果想让他们排在一行内，就可以使用浮动定位，将元素浮起来，一行排列。浮动的元素水平居中，有两种情况，一是浮动的元素有固定的宽度，另一种是无法确定宽度的浮动元素居中。

一、确定宽度的浮动元素

用列表表示的水平菜单栏，浮动在一行，整个菜单的宽度是固定的

 

<div class="header">
		<ul>
			<li>HTML/CSS</li>
			<li>JavaScript</li>
			<li>Server Side</li>
			<li>ASP.NET</li>
			<li>XML</li>
			<li>Web Services</li>
		</ul>
	</div>	

<style type="text/css">
	html,body{margin: 0px;padding: 0px;}
	ul {list-style: none;}
	a {text-decoration: none;}

	.header {background: #fbfbfb; width: 700px;margin: 20px auto;height: 50px;font-size: 14px;text-align: center;line-height: 50px;}
	.header ul li {float: left;width: 100px;}
</style>

 因为header的宽度是固定的，所以设置header的左右外边距为自动就可满足header整体居中显示，即：margin:20px auto;上下外边距可自动定义。

 

另：设定header元素的height，同时设定line-height等于height，可以使得header中的元素上下也居中。

二、无法确定宽度的浮动元素居中

一个非常简单的例子，就是用列表来表示页码，因为页码会根据的内容的多少有多有少，无法确定其整个元素的宽度

 

<div class="pagelist">
	<div class="pages">
		<ul>
			<li><a href="#"><<</a></li>
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
			<li><a href="#">5</a></li>
			<li>...</li>
			<li><a href="#">99</a></li>
			<li><a href="#">100</a></li>
			<li><a href="#">>></a></li>
		</ul>
	</div>
</div>

 

<style type="text/css">
	ul {list-style: none;}
	a {text-decoration: none;}
	.pagelist{position: relative;float: left;left: 50%;}
	.pages {position: relative;float:left;right: 50%; margin: 20px auto;text-align: center;height: 30px;}
	.pages ul {height: 30px;text-align: center;margin: auto;line-height: 30px;}
	.pages li{float: left;height: 30px;margin-left: 4px;}
	.pages ul li a{border: 1px solid #e3e3e3;border-radius: 3px;padding: 0px 10px;}
</style>

 pages元素显示的是整个页码，并且都浮动在一行，因为pages元素没有固定的宽度，所以，怎么设置pages的左右外边距为自动都不会起效果，设置text-align:center;对其也没有效果，如果这样想的话确实是件很纠结的事。这个时候，需要在pages的外边再添加一个div————pagelist,并且设置 .pagelist {position:relative;float:left;left:50%;} .pages {position:relative;float:left;right:50%;}一样以来，一左一右，就会使得pages中的元素居中显示了