Question

我已尝试过stackoverflow中有关如何居中导航的15条建议。你能帮我吗？我只是想让导航器居中，并且可以将鼠标悬停在专业知识上，而导航栏的其余部分不会乱七八糟。

这是我的标记：

<nav id="header-home-nav">
    <div id="menu">
        <ul>
            <li id="" class=""><a href="" onclick="doCircleExit(this)">About</a></li> 
            <li id="line-li"><p class="nav-lines">|</p></li> 
            <li id="" class=""><a href="" onclick="doCircleExit(this)">Contact</a></li> 
            <li id="" class=""><p class="nav-lines">|</p></li> 
            <li id="" class=""><a href="">Expertise</a>
                <ul id="" class="sub-menu">
                    <li><a href="">&#9654; Finance</a></li>
                    <li><a href="">&#9654; Operations</a></li>
                    <li><a href="">&#9654; Capital Management</a></li>
                    <li><a href="">&#9654; Capital Management</a></li>
                    <li><a href="">&#9654; Capital Management</a></li>
                    <li><a href="">&#9654; Capital Management</a></li>
                    <li><a href="">&#9654; Capital Management</a></li>
                    <li><a href="">&#9654; Capital Management</a></li>
                </ul>
            </li> 
        </ul>
    </div>
</nav>

的CSS：

#menu {
position: relative;
font-size: 0.8em;
margin: 0;
padding: 0;   
overflow: visible;
z-index: 2;
height: 35px; 
width:100%;    
}

#menu ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
z-index: 3;
width:100%;
background-color: #666666;
}

 #menu li {
background-color: #1b1b1b;
display: block;
float: left;

position:relative;
}

#menu a {
color: #ffffff;
display: block;
text-align: center;
text-decoration: none;

margin: 0;
padding: 10px 20px;
}

#menu a:hover {
color: #000000;
margin: 5px 10px;
padding: 5px 10px;
background-color: #C0C0C0;
border-radius: 10px;
}

#menu ul.sub-menu {
display: none;
position: absolute;
left: 0;
top: 100%;
z-index:100;

}

#menu ul.sub-menu li {
width: 200px;
background-color: #C0C0C0;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #666666;
z-index:5;

}

#menu ul.sub-menu li a {
color: #000;
text-align: center;
margin: 5px 10px;
padding: 5px 10px;
text-align: left;
}

#menu ul.sub-menu li a:hover {
color: snow;
background-color: #666666;
}

#menu li:hover ul.sub-menu {
display: block;
z-index: 90;
}

编辑：

这是一个jsfiddle：

http://jsfiddle.net/8A9tq/

抱歉，忘了添加它。

编辑：

响应很重要。所以无论屏幕尺寸如何，我都需要居中。

Answer 1

导航居中：http://jsfiddle.net/8A9tq/1/

要使元素居中，您需要三件事：一组（非百分比）宽度，块显示（自动使用块级元素，但无论如何都是一个好习惯），并将左右边距设置为auto：

  width: 300px;
  display: block;
  margin: 0 auto;

因此，对于您的示例，根据您想要居中的元素，您可以尝试：

  #menu ul {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 3;
  width: 300px;
  display:block;
  margin: 0 auto;
  background-color: #666666;
  }

或

  #menu {
  position: relative;
  font-size: 0.8em;
  margin: 0 auto;
  padding: 0;   
  overflow: visible;
  z-index: 2;
  height: 35px; 
  width:300px;
  display:block;
  }

等等

Answer 2

这似乎有效：http://jsfiddle.net/4Eqad/

#menu {
position: relative;
font-size: 0.8em;
margin: 0;
padding: 0;   
overflow: visible;
z-index: 2;
height: 35px; 
width:100%;    
margin-left:25%;
}

请注意，新版本是保证金：25％。无论你想做什么，都可以做到。

Answer 3

您可以添加以下内容：

#header-home-nav {
    width: 100%;
}

然后，给孩子（#menu）一些最大宽度和自动边距：

#menu {
    background: #1B1B1B;
    margin: 0 auto;
    max-width: 300px;

    position: relative;
    font-size: 0.8em;
    padding: 0;
    overflow: visible;
    z-index: 2;
    height: 35px;
}

Answer 4

在这里你可以保留你的标记，只是说位置必须是50％左右，50％是正确的。

#menu {
position: relative;
font-size: 0.8em;
margin: 0;
padding: 0;   
overflow: visible;
z-index: 2;
height: 35px; 
width:100%;
left: 50%;
right: 50%;

}

小提琴：http://jsfiddle.net/uPs8J/2/

还有一个人问如何使导航栏居中

4 个答案: