iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 1
1
Modern Web

30天CSS&Bootstrap排版統整系列 第 1

Day1 --水平置中(1)

使用margin: 0 auto;

  • margin屬性若只有兩個參數,前者代表top和bottom,後者代表left和right,所以margin:0 auto表示上下邊距為0,左右根據寬度自適應相同值(居中)。

  • 生效條件

    1. 塊級元素(block element):設置寬度的情況下,可以在父級元素中達到水平居中(ex:p,div,h1...)
    2. 行內元素(inline element):設置display:block,再給要居中的元素設置寬度(ex:span,a,strong...)
    3. 行內塊元素(inline-block element):設置display:block,自帶寬度可以不用設置(ex:button,img...)
  • 範例

       // css(block element)
    
       .parent{
         width: 500px;
         height: 100px;
         border:2px solid green;
     }
       .child{
         width: 100px;
         height: 30px;
         margin: 0 auto;
         border:2px solid blue;
     }
       // css(inline element)
    
       .parent{
         width: 500px;
         height: 100px;
         border:2px solid green;
     }
       .child{
         width: 100px;
         height: 30px;
         margin: 0 auto;
         display: block;
         border:2px solid blue;
     }
       // css(inline-block element)
    
       .parent{
         width: 500px;
         height: 100px;
         border:2px solid green;
     }
       .child{
         margin: 0 auto;
         display: block;
     }
    
        // body(block element)
    
        <div class="parent">
             <div class="child"></div>
        </div>
    
        // body(inline element)
    
        <div class="parent">
             <span class="child"></span>
        </div>
    
        // body(inline-block element)
    
        <div class="parent">
             <button class="child"></button>
        </div>
    
  • 結果
    block element
    https://ithelp.ithome.com.tw/upload/images/20200914/20129568yBJf2OxbTx.png
    inline element
    https://ithelp.ithome.com.tw/upload/images/20200914/20129568yBJf2OxbTx.png
    inline-block element
    https://ithelp.ithome.com.tw/upload/images/20200914/20129568OuytEpfoh9.png


下一篇
Day2--水平置中(2)
系列文
30天CSS&Bootstrap排版統整30

尚未有邦友留言

立即登入留言