Question

如何在div中水平居中导航？ CSS最好应该响应。

HTML：

<nav id="centermenu">
    <ul>
        <li><a href="#">Business</a></li>
        <li><a href="#">Specialities</a></li>
        <li><a href="#">Contact us</a></li>
    </ul> 
</nav>

好吧，css是，并且改变了左边：50％到25％，nada。希望这已经足够了

#centermenu {
float: left;
width: 100%;
text-align: center;
border-bottom: 2px solid #011;
background: #ffe;
overflow: hidden;
 position: relative;
}

#centermenu ul {
float: left;
clear: left;
position: relative;
list-style: none;
left: 50%;
display: block;
text-align: center;
}


#centermenu ul li {
display: inline;
text-align: center;
margin: 1em;
padding: 1em;
 }

Answer 1

确保您的浏览器未以怪癖模式呈现。您应该在HTML文件的第一行指定DOCTYPE以在标准模式下呈现：

<!DOCTYPE html>

在标准模式下，这适用于（经过测试并为我工作）：

#centermenu {
width: 100%;
text-align: center;
border-bottom: 2px solid #011;
background: #ffe;
overflow: hidden;
position: relative;
}

#centermenu ul {
list-style: none;
display: block;
margin: 0 auto;
text-align: center;
}


#centermenu ul li {
display: inline;
text-align: center;
margin: 1em;
padding: 1em;
}

Answer 2

#centermenu {
  display:block;
  width:100%;
  text-align:center;
}

#centermenu > ul {
  display:inline-block;
  text-align:left;
  overflow:auto; 
}

#centermenu > ul > li {
  float:left;
}

Answer 3

ul {
  display: block;
  margin: 0 auto;
}

Answer 4

你需要指定ul的宽度，如果你使用margin：0 auto;不需要漂浮：左;或者左：50％

#centermenu ul {
margin: 2 auto;
display: block;
width: 600px;
}

或使ul显示内联;

#centermenu ul {
display: inline;
}

如何水平对齐导航并使其居中，最好使用响应式CSS

4 个答案: