一.自适应宽度的水平居中
方法一
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: center 和 display: inline-block 相结合的方式。
方法二
** css :**
.nav {
display: table;
margin: 0 auto;
}
.nav li {
display: table-cell;
padding: 10px;
}
还是同样的 html，效果图如下：
自适应宽度的水平居中 2
