让多个块级元素和行内元素一样水平居中

昨天做导航遇到一个问题：如何让ul中的li水平居中？

　　一般我们使用float,然后使用margin或者padding，通过距离让它们居中，但是如果你要做响应式就会发现这样的方法并不好用。我在网上看到大神的方法做了一点小的总结：

　　　　将块级元素设置 display 属性为 inline-block; 注意该元素必须不能设置浮动！

　　　　然后将父元素设置 text-align :center ; 这样就块级元素就会和行内元素一样水平居中，但这样做子块级元素就不能设置Width属性了

HTML代码：　　　　

　　　　　　<div></div>

　　　　</div>
　　</body>

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>

　　效果如下：

posted on 2016-12-13 11:10 Facker 阅读(3069) 评论(0) 收藏举报