页面布局

一.自适应宽度的水平居中

方法一
css :

    .nav {
      text-align: center;
    }

    .nav ul {
      display: inline-block;
    }

    .nav li {
      float: left;
      margin: 10px;
      list-style: none;
    }

html :

<div class="nav">
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">news</a></li>
    <li><a href="#">people</a></li>
    <li><a href="#">about</a></li>
  </ul>
</div>

效果图 :

自适应宽度的水平居中 1

从 css 代码可以看出,在同时未设定父元素和子元素宽度的情况下,即父子元素都自适应宽度的情况下,要使子元素居中,可使用 text-align: centerdisplay: inline-block 相结合的方式。

方法二

** css :**

   .nav {
     display: table;
     margin: 0 auto;
   }

   .nav li {
     display: table-cell;
     padding: 10px;
   }

还是同样的 html,效果图如下:

自适应宽度的水平居中 2

推荐阅读更多精彩内容