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. }  

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

     



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

  • 相关阅读:
    【JavaSE】成员方法快速入门和方法的调用机制原理
    HarmonyOS实战—实现注册登录和修改密码页面
    苹果CMS自动定时采集教程
    HarmonyOS实战—统计按钮点击次数
    HarmonyOS实战—点击更换随机图片
    C语言 main 函数
    C语言 vprintf 函数和 printf 函数区别
    C语言 vprintf 函数
    C语言 va_start / va_end / va_arg 自定义 printf 函数
    C语言 va_arg 宏
  • 原文地址:https://www.cnblogs.com/leibo520/p/7064295.html
Copyright © 2011-2022 走看看