昨天做導航遇到一個問題:如何讓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>
效果如下: