父母不能水平中心div

Question

我有一些div設置爲導航按鈕，我已經把所有的按鈕放到一個div然後把那個div放入另一個「持有人」div。問題是我似乎無法中心控制按鈕的div。

我試圖添加margin:0汽車，但它似乎並沒有做任何事情：

HTML：

<div class="navholder"> 

<div class="nav"> 
<div class="button1"><div class="triangle"></div></div> 
<div class="button2"><div class="triangle"></div></div> 
<div class="button3"><div class="triangle"></div></div> 
<div class="button4"><div class="triangle"></div></div> 
<div class="button5"><div class="triangle"></div></div> 
<div class="button6"><div class="triangle"></div></div> 
</div> 

</div> 

CSS：

.navholder { 
    width:950px; 
    height:350px; 
    background-color:grey; 

} 

.nav { 
    position:relative; 
    bottom:0px; 
    margin:0 auto; 
} 

.button1, .button2, .button3, .button4, .button5, .button6 { 
    width:120px; 
    height:35px; 
    background-color:rgb(204,204,204); 
    margin-left:5px; 
    margin-right:5px; 
    display:inline-block; 
    float:left; 

} 

.button1:hover > .triangle, .button2:hover > .triangle, .button3:hover > .triangle, .button4:hover > .triangle, .button5:hover > .triangle, .button6:hover > .triangle{ 
    display: block; 
} 

.button1:hover, .button2:hover, .button3:hover, .button4:hover, .button5:hover, .button6:hover{ 
    background-color:#B7939B; 
} 

.triangle { 
    position:relative; 
    width: 0; 
    height: 0; 
    border-left: 15px solid transparent; 
    border-right: 15px solid transparent; 
    border-bottom: 15px solid #B7939B; 
    top:-15px; 
    left:0; 
    right:0; 
    margin:0 auto; 
    display: none; 
} 

繼承人的我的代碼Fiddle 。

Answer 1

添加寬度您.nav類：

.nav { 
    position:relative; 
    bottom:0px; 
    margin:0 auto; 
    width:780px; 
} 

Answer 2

試試這個

.nav { 
    text-align: center; 
} 

的原因保證金：0汽車;不起作用是因爲你有div的「內聯塊」。您只能通過從父級居中來對內嵌塊進行居中。

，如果你不希望出現這種情況，你可以嘗試改變這個

.button1, .button2, .button3, .button4, .button5, .button6 { 
    display:inline-block; 
} 

這個

.button1, .button2, .button3, .button4, .button5, .button6 { 
    display: block; 
} 

Answer 3

你可以用這個嘗試：

.navholder { 
    text-align:center; 
} 

.nav { 
    display:inline-block; 
} 

您的演示http://jsfiddle.net/S6BVL/3/

Answer 4

爲.nav指定width，這對於5個按鈕來說足夠大。它默認爲100％的貨櫃，950px。小提琴：http://jsfiddle.net/S6BVL/2/

Answer 5

試試這個demo，我加入text-align:center到.navholder和width:800px到.nav：

CSS：

.navholder { 
    width:950px; 
    height:350px; 
    background-color:grey; 
    text-align:center; 

} 

.nav { 
    position:relative; 
    bottom:0px; 
    margin:0 auto; 
    width:800px; 
} 

Answer 6

此作品：

.navholder { 
    width:950px; 
    height:350px; 
    background-color:grey; 
    text-align: center; 
} 

.nav { 
    bottom:0px; 
    margin: auto; 
    display: inline-block; 
} 

Answer 7

或者你也可以添加text-align: center;到.nav

，然後就從.button1, .button2, .button3, .button4, .button5, .button6 {

這樣刪除float: left;：

.nav { 
    position:relative; 
    bottom:0px; 
    text-align: center; 
} 

.button1, .button2, .button3, .button4, .button5, .button6 { 
    width:120px; 
    height:35px; 
    background-color:rgb(204,204,204); 
    margin-left:5px; 
    margin-right:5px; 
    display:inline-block; 
} 

這裏的的jsfiddle - http://jsfiddle.net/S6BVL/8/