css如何讓自適應寬度的塊居中顯示

  <div class='footer'>      
      <ul>
          <li>網站首頁</li>
          <li>企業招聘</li>
          <li>聯系我們</li>
          <li>講師招聘</li>
      </ul>
  </div>

    .footer{
        width: 100%;
        height: 100px;
        background: black;
        position: fixed;
        bottom: 0;
        text-align: center;
    }
    .footer ul{
        display: inline-block;
        color: white;
    }
    .footer li{
        height: 100px;
        line-height: 100px;
        float: left;
        margin-right: 20px
    }

　　　　　　在父級加上 text-align: center;   雖然這個屬性只對行內元素有效，但是同時把需要居中的塊設置上 display: inline-block; 這樣就可以把塊級元素轉化為擁有塊級屬性的行內元素，從而讓text-align生效，達到自適應寬度居中顯示。