zoukankan      html  css  js  c++  java
  • margin居中显示

    标签(空格分隔): margin居中


    margin居中:

    如下图的代码查看:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>margin塌陷</title>
        <style type="text/css">
            *{
                padding:0;
                margin:0;
            }
            .a{
    
                780px;
                height:50px;
                background-color: red;
                margin:0px auto;
    
            }
        </style>
    </head>
    <body>
            <div class="a"></div>
            <div class="b"></div>
    
    
    </body>
    </html>
    

    文字居中:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>margin塌陷</title>
        <style type="text/css">
            *{
                padding:0;
                margin:0;
            }
            div{
    
                780px;
                height:50px;
                background-color: red;
                margin:0px auto;
                text-align: center;
    
            }
            /*水平居中必须有width,必须要明确width,文字水平居中使用text-align:center
            2.只有标准流下的盒子才能使用margin:0auto
            3.当一个盒子浮动了,固定定位了,绝对定位了,margin:0auto不能用了,
            4.margin是居中盒子,不是居中文本*/
        </style>
    </head>
    <body>
            <div>文字</div>
            <div class="a"></div>
    
    
    </body>
    </html>
    
    • 总结:
      水平居中必须有width,必须要明确width,文字水平居中使用text-align:center
      2.只有标准流下的盒子才能使用margin:0auto
      3.当一个盒子浮动了,固定定位了,绝对定位了,margin:0auto不能用了,
      4.margin是居中盒子,不是居中文本
  • 相关阅读:
    Qtcreator中printf()/fprintf()不显示问题处理方法
    C++实现斐波那契数列
    DAPP超详细解释
    自底向上的合并排序算法
    Python 生成哈希hash--hashlib模块
    使用js的一些小技巧
    js——事件
    django学习
    js——js特效
    js--DOM学习
  • 原文地址:https://www.cnblogs.com/surewing/p/10721223.html
Copyright © 2011-2022 走看看