讓多個塊級元素和行內元素一樣水平居中


  昨天做導航遇到一個問題:如何讓ul中的li水平居中?

  一般我們使用float,然后使用margin或者padding,通過距離讓它們居中,但是如果你要做響應式就會發現這樣的方法並不好用。我在網上看到大神的方法做了一點小的總結:

    將塊級元素設置 display 屬性為 inline-block;  注意該元素必須不能設置浮動!

    然后將父元素設置 text-align :center ;  這樣就塊級元素就會和行內元素一樣水平居中,但這樣做子塊級元素就不能設置Width屬性了

HTML代碼:    

  <body>
    <div>      

      <div></div>

      <div></div>

      <div></div>

    </div>
  </body>

css代碼

  <style type="text/css">

    body>div{
      width: 100%;
      height: 100px;
      background: #398439;
      text-align: center;
    }

    div>div{
      width: 200px;
      height: 100px;
      background-color: #000000;
      margin-right: 10px;
      display: inline-block;
    }
  </style>

  效果如下:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM