父母不能水平中心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/