Question

所以我有这样一个网站的标题：

http://i.stack.imgur.com/k4hjp.png

我正在尝试将导航菜单与中心对齐。导航div位于中心列（黑色）内，其CSS为：

.nav {
    text-align: center;
    margin: 0 auto;
    position: relative;
    top: 287px;
    width: 100%;
    height: 70px;
    z-index: 100;
}

目前，导航中的每个按钮都是另一个div。如果有人有关于如何在没有这么多div的情况下接近它的建议我会很感激，但无论如何，按钮的代码是：

.button {
    margin-left: 10px;
    float: left;
    position: relative;
    text-align: center;
    line-height: 40px;
    width: 135px;
    height: 40px;
    background: #aa0000;
    color: #fff;
    font-weight: bold;

}

我甚至尝试将body-align设置为body到center，但它不起作用。如何将此菜单居中对齐？

Answer 1

现在你的div上的"float:left"使它们保持左对齐。用"display:inline-block;"替换那个浮动，你没事。而且，如果您不想使用这些div，您可以尝试使用列表。菜单的常见做法是这样的：

<ul>
  <li>Menu item a</li>
  <li>Menu item b</li>
</ul>

Answer 2

样式：

.centerDiv { 
            width: 60%; 
            height:70px; 
            margin: 0 auto; 
            text-align: center;
            top: 287px;
            z-index: 100;
        } 

        .buttonDiv { 
            width: 10%; 
            height:40px; 
            background-color:#aa0000; 
            float:left; 
            margin-left: 10px;
            position: relative;
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-weight: bold;
        }

标记：

<div class="centerDiv">
            <div class="buttonDiv">Button 1</div>
            <div class="buttonDiv">Button 2</div>
            <div class="buttonDiv">Button 3</div>
            <div class="buttonDiv">Button 4</div>
            <div class="buttonDiv">Button 5</div>
            <div class="buttonDiv">Button 6</div>
        </div>

Answer 3

很抱歉自我回答，但没有一个答案完全解决了问题。显然，导航容器宽度设置为100％可防止任何居中。将其设置为静态值后，我能够正常对齐。谢谢大家的帮助！

Answer 4

使用<a>代替div，您可以使其看起来像

一样有吸引力

a{
display:block;
background-color:red;
width:100px;
}

然后使用text-align:center它将对齐

我在调整div中心方面遇到了麻烦

4 个答案: