美文网首页
元素的水平居中

元素的水平居中

作者: 未路过 | 来源:发表于2022-08-31 20:59 被阅读0次
        水平居中:
          1.行内级元素: 
            * 设置父元素的text-align: center
          2.块级元素:
            * 设置当前块级元素(宽度) margin: 0 auto;
          3.绝对定位
            * 元素有宽度情况下, left0/right0/margin: 0 auto;
          4.flex
            * justify-content: center
    

    1. 行内级元素(包括inline-block元素)  行内非替换元素span/a 行内替换元素 img/input

    水平居中:在父元素(无论什么父级元素,只要子元素是inline-block,就可以居中。)中设置text-align: center


    image.png
    <style>
        .father{
          width:300px;
          height: 300px;
          background-color: red;
          text-align: center;
        }
      </style>
    </head>
    <body>
      <div class="father">
        <span class="son" style="background-color: green;">我是儿子</span>
      </div>
      <div>我是标准流div</div>
    
    

    2.块级元素(居中元素必须要有宽度)

    水平居中:margin: 0 auto
    父元素的宽度 = 块级元素宽度 + margin-left + margin-right(margin:0 auto 然后就可以水平居中的原理,因为margin-left margin-right是默认值auto,就是由浏览器决定,自动均分了)
    如果不给子元素宽度,只是设置它的margin为0,auto,那么子元素独占父元素一列。

    <style>
        .father{
          width:300px;
          height: 300px;
          background-color: red;
          text-align: center;
        }
        .son{
          width: 100px;
          margin: 0 auto;
        }
    
      </style>
    </head>
    <body>
      <div class="father">
        <div class="son" style="background-color: green;">我是儿子</div>
      </div>
      <div>我是标准流div</div>
    

    3.绝对定位(居中元素必须要有宽度。)

    设置剧中元素的left, right,为0, margin0 auto

    style>
        .father{
          position: relative;
          width:300px;
          height: 300px;
          background-color: red;
        }
        .son{
          position:absolute;
          width: 100px;
          left: 0;
          right: 0;
          margin:auto;
          background-color: green;
        }
      </style>
    </head>
    <body>
      <div class="father">
        <div class="son">我是儿子</div>
      </div>
      <div>我是标准流div</div>
    

    4. flex

    给居中元素设置justigy-content:center

    相关文章

      网友评论

          本文标题:元素的水平居中

          本文链接:https://www.haomeiwen.com/subject/xhtjnrtx.html