浮动元素的水平居中

当HTML结构如下所示：

 

[html]  view plain  copy

 

1. <div id="container">  
2.     <div class="left">left</div>  
3. </div>  

同时，CSS这样写：

 

 

[css]  view plain  copy

 

1. #container{  
2.   width:400px;  
3.   height:110px;  
4.   border:1px solid black;  
5. }  
6. #container div{  
7.   width:100px;  
8.   height:100px;  
9.   float:left;  
10.   margin:0 auto;  
11. }  

效果如下：

很明显，图片并没有水平居中。这是因为浮动元素脱离了普通文档流，margin：0 auto也就不起作用了。

解决方法很简单：在浮动元素外面再嵌套一层div，代码如下：

 

[html]  view plain  copy

 

1. <div id="container">  
2.   <div class="content">  
3.     <div class="left">left</div>  
4.   </div>  
5. </div>  

[html]  view plain  copy

 

1. #container{  
2.   width:400px;  
3.   height:110px;  
4.   border:1px solid black;  
5. }  
6. .content{  
7.   <strong>width:100px;</strong>  
8.    margin: 0 auto;  
9. }  
10. .content div{  
11.   width:100px;  
12.   height:100px;  
13.   float:left;  
14. }  

此时，浮动元素就可以水平居中了：

 

同样地，对于多个浮动元素，也可以用这种方法实现水平居中，效果如下：

当HTML结构如下所示：

 

[html]  view plain  copy

 

1. <div id="container">  
2.     <div class="left">left</div>  
3. </div>  

同时，CSS这样写：

 

 

[css]  view plain  copy

 

1. #container{  
2.   width:400px;  
3.   height:110px;  
4.   border:1px solid black;  
5. }  
6. #container div{  
7.   width:100px;  
8.   height:100px;  
9.   float:left;  
10.   margin:0 auto;  
11. }  

效果如下：

很明显，图片并没有水平居中。这是因为浮动元素脱离了普通文档流，margin：0 auto也就不起作用了。

解决方法很简单：在浮动元素外面再嵌套一层div，代码如下：

 

[html]  view plain  copy

 

1. <div id="container">  
2.   <div class="content">  
3.     <div class="left">left</div>  
4.   </div>  
5. </div>  

[html]  view plain  copy

 

1. #container{  
2.   width:400px;  
3.   height:110px;  
4.   border:1px solid black;  
5. }  
6. .content{  
7.   <strong>width:100px;</strong>  
8.    margin: 0 auto;  
9. }  
10. .content div{  
11.   width:100px;  
12.   height:100px;  
13.   float:left;  
14. }  

此时，浮动元素就可以水平居中了：

 

同样地，对于多个浮动元素，也可以用这种方法实现水平居中，效果如下：

转载于:https://www.cnblogs.com/leibo520/p/7064295.html