用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进行修改.