昨天做导航遇到一个问题：如何让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>
效果如下：
