用CSS 實現 浮動元素的 水平居中

問題描述：

基本的html結構：

<div>

<!--

<span>1</span>

<span>2</span>

<span>3</span>

<span>4</span>

<span>5</span>

-->

<p>p1</p>

<p>p2</p>

<p>p3</p>

<p>p4</p>

<p>p5</p>

</div>

 

欲實現效果：

 浮動元素居中的出現條件：

*1.首先是內部元素需要設置寬高

*2.元素需要同行顯示

*3.元素需要居中

分析：如果想對一個元素設置寬高，那么元素類型就不能夠是行內元素，只能夠是塊狀元素）

*如果內部開始為塊狀元素時，如p元素，只能使用float使其同行顯示(float又會改變顯示模式)，但如果進行居中處理，則會發現margin:0 auto;屬性失效

*如果內部初始為行內元素，因為不能設置寬高，勢必會將其轉化為塊狀元素，即display:block;然后float:left，此時發現父級元素的text-align:center居中屬性也失效了

 

 

 

 

解決方案：

當HTML結構如下所示：

<div id="container">  
    <div class="left">left</div>  
</div>  

 

同時，CSS這樣寫：

#container{  
  width:400px;  
  height:110px;  
  border:1px solid black;  
}  
#container div{  
  width:100px;  
  height:100px;  
  float:left;  
  margin:0 auto;  
}  

效果如下：

很明顯，圖片並沒有水平居中。這是因為浮動元素脫離了普通文檔流，margin：0 auto也就不起作用了。

解決方法很簡單：在浮動元素外面再嵌套一層div，代碼如下：

<div id="container">  
  <div class="content">  
    <div class="left">left</div>  
  </div>  
</div>  

#container{  
  width:400px;  
  height:110px;  
  border:1px solid black;  
}  
.content{  
  <strong>width:100px;</strong>  
   margin: 0 auto;  
}  
.content div{  
  width:100px;  
  height:100px;  
  float:left;  
}  

此時，浮動元素就可以水平居中了：

同樣地，對於多個浮動元素，也可以用這種方法實現水平居中，效果如下：

需要注意的是，浮動元素外層嵌套的div寬度應該設置為浮動元素的寬度之和，否則無法實現真正的水平居中。

這個方法的缺點是其可擴展性較差，如果浮動元素的個數發生了改變，則需要對.content這個樣式里的width進行修改.