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

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

一、确定宽度的浮动元素

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

 

		

			
HTML/CSS
			
JavaScript
			
Server Side
			
ASP.NET
			
XML
			
Web Services
		
	
	

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

 

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

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

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

 

	

		

			
<<
			
1
			
2
			
3
			
4
			
5
			
...
			
99
			
100
			
>>
		
	

 

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