Question

我有一些div设置为导航按钮，我已将所有按钮放入div中，然后将该div放入另一个“holder”div中。问题是我似乎无法将持有按钮的div居中。

我尝试添加margin:0 auto，但它似乎没有做任何事情：

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

你可以试试这个：

.navholder {
   text-align:center;
}

.nav {
  display:inline-block;
}

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

Answer 3

为width指定.nav，其大小足以容纳5个按钮。它默认为100％的容器950px。小提琴：http://jsfiddle.net/S6BVL/2/

Answer 4

试试这个 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 5

这有效：

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

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

Answer 6

试试这个

.nav {
    text-align: center;
}

原因保证金：0自动;不起作用是因为你有div作为“内联块”。您只能通过父级居中来居中嵌入式块。

如果您不想这样，您可以随时尝试更改此

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

到这个

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

Answer 7

或者您只需将text-align: center;添加到.nav

即可

然后从float: left;

中删除.button1, .button2, .button3, .button4, .button5, .button6 { 像这样：

.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/

不能在父级中使用水平中心div

7 个答案: