浮动元素居中显示

淡淡的烟草味﹌ 2022-08-07 07:48 230阅读 0赞

## 方法一： ##

html代码如下：

<span style="font-size:12px;"><span style="white-space:pre">	</span><body>
    		<h1>浮动元素水平居中</h1>
    		<div class="wrap clearfix">
    			<ul class="page">
    				<li><a href="">网站建设</a>|</li>
    				<li><a href="">网页素材</a>|</li>
    				<li><a href="">网页特效</a>|</li>
    				<li><a href="">设计分享</a>|</li>
    				<li><a href="">建站教程</a>|</li>
    				<li><a href="">网站模板</a>|</li>
    				<li><a href="">酷站赏析</a></li>
    			</ul>
    		</div>
    		<div class="clear"></div>
    		<p class="end">供学习交流</p>
    	</body></span>

css代码如下：

<span style="font-size:12px;"><span style="white-space:pre">		</span><style type="text/css" >
    			body{
    				margin:0 auto;
    				padding:0;
    				lisy-style:none;
    				font-size:14px;
    				font-family:Tahoma, Geneva, sans-serif;
    				border:4px solid black;
    				text-align:center;	
    			}
    			a{
    				text-decoration:none;
    			}
    			<span style="color:#990000;"><strong>.clearfix:after{/*这样只能清除子元素的浮动，不能清除自身的浮动*/
    				content:"";
    				height:0;
    				visibility:hidden;
    				display:block;
    			}
    			.clearfix{
    				zoom:1;
    			}/*不加这一句也可以清除子元素的浮动*/</strong></span>
    			h1{
    				text-align:center;
    				padding:10px;
    				font-size:20px;
    				margin:30px 0;
    			}
    			.wrap{
    				position:relative;
    				margin:20px auto;
    				text-align:center;/*这两句在这里不能让li居中显示*/
    				padding:10px 0;
    				background:orange;
    				overflow:hidden;
    				
    			}
    			.page{
    				/*text-align:center;这一句放在这里不能让元素居中显示*/
    				float:left;
    				position:relative;
    				<span style="color:#cc0000;"><strong>left:50%;/*这一句放在这里让元素居中显示*/</strong></span>
    			}
    			.page li{
    				float:left;
    				position:relative;
    				<span style="color:#cc0000;"><strong>right:50%;/*加上这一句再配合上面的left:50%  li元素才能真正的居中显示*/</strong></span>
    				overflow:hidden;
    				margin:0 5px;
    			}
    		</style></span>

总结：这里主要用到position:relative配合left:50%的技巧，兼容各浏览器，需要注意的是IE7下需要设置overflow:hidden;来解决无法设置子元素宽度的BUG。  
注意，只有清楚li元素的浮动后，“供学习交流”才能居中显示。

## 方法二： ##

html代码如下：

<span style="font-size:12px;"><span style="white-space:pre">	</span><body>
    		<h1>浮动元素水平居中</h1>
    		<div class="wrap clearfix">
    			<strong><span style="color:#990000;"><div class="inwrap"></span></strong>
    				<ul class="page">
    					<li><a href="">网站建设</a>|</li>
    					<li><a href="">网页素材</a>|</li>
    					<li><a href="">网页特效</a>|</li>
    					<li><a href="">设计分享</a>|</li>
    					<li><a href="">建站教程</a>|</li>
    					<li><a href="">网站模板</a>|</li>
    					<li><a href="">酷站赏析</a></li>
    				</ul>
    			</div>
    		</div>
    		<p class="end">供学习交流</p>
    	</body></span>

css代码如下：

<span style="font-size:12px;"><span style="white-space:pre">		</span><style type="text/css" >
    			body{
    				margin:0 auto;
    				padding:0;
    				lisy-style:none;
    				font-size:14px;
    				font-family:Tahoma, Geneva, sans-serif;
    				border:4px solid black;
    				text-align:center;	
    			}
    			a{
    				text-decoration:none;
    			}
    			.clearfix:after{/*这样只能清除子元素的浮动，不能清除自身的浮动*/
    				content:"";
    				height:0;
    				visibility:hidden;
    				display:block;
    			}
    			.clearfix{
    				zoom:1;
    			}/*不加这一句也可以清除子元素的浮动*/
    			h1{
    				text-align:center;
    				padding:10px;
    				font-size:20px;
    				margin:30px 0;
    			}
    			.wrap{
    				position:relative;
    				margin:20px auto;
    				text-align:center;/*这两句在这里不能让li居中显示*/
    				padding:10px 0;
    				background:orange;
    				overflow:hidden;	
    			}
    			.inwrap{
    				float:left;
    				position:relative;
    				<span style="color:#cc0000;"><strong>left:50%;</strong></span>
    			}
    			.page{
    				/*text-align:center;这一句放在这里不能让元素居中显示，对于text-align属性，需要进一步学习*/
    				float:left;
    				position:relative;
    				<strong><span style="color:#cc0000;">left:-50%;</span></strong>
    				list-style:none;
    			}
    			.page li{
    				float:left;
    				margin:0 5px;
    			}
    			.page li a{
    				float:left;
    				display:block;	
    			}
    		</style></span>

总结：这种方法与第一种方法的不同之处在于，多套了一层div,left:-50%,更合理一些，可以避免一些不必要的IE BUG,这种float元素居中的方式可以扩展应用到很多元素中。  
  
显示的结果图如下：

![Center][]

[Center]: /images/20220805/094d2ca1d8e64030ab2174807477aa8a.png