zoukankan      html  css  js  c++  java
  • 浮动元素的水平居中

    当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.   400px;  
    3.   height:110px;  
    4.   border:1px solid black;  
    5. }  
    6. .content{  
    7.   <strong>100px;</strong>  
    8.    margin: 0 auto;  
    9. }  
    10. .content div{  
    11.   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.   400px;  
    3.   height:110px;  
    4.   border:1px solid black;  
    5. }  
    6. .content{  
    7.   <strong>100px;</strong>  
    8.    margin: 0 auto;  
    9. }  
    10. .content div{  
    11.   100px;  
    12.   height:100px;  
    13.   float:left;  
    14. }  

    此时,浮动元素就可以水平居中了:

     



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

  • 相关阅读:
    需要我们了解的SQL Server阻塞原因与解决方法
    SQL Server应用模式之OLTP系统性能分析
    第一章 scala环境搭建
    IO
    装饰器模式
    java 泛型方法
    文件格式转换
    spring ioc
    深入浅出Java模式设计之模板方法模式
    struts2
  • 原文地址:https://www.cnblogs.com/leibo520/p/7064295.html
Copyright © 2011-2022 走看看