CSS 如何使css导航栏居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17368615/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to center css navigation bar
提问by user2262637
i am trying to center my css navigation bar but cant figure out why is not working, where am i doing wrong. i want it in the top center of the page. i tried margin:0 auto but it wont work here is my code:
我试图将我的 css 导航栏居中，但无法弄清楚为什么不起作用，我哪里做错了。我希望它在页面的顶部中心。我试过 margin:0 auto 但它不会在这里是我的代码：
<style>
ul {
list-style-type: none;
padding: 0;
overflow:hidden;
}
a:link,a:visited {
margin:0 auto;
display:block;
width: 120px;
font-weight:bold;
color:#FFFFFF;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover, a:active {
background-color:#7A991A;
}
li {
float: left;
}
#menu {
background-color:#98bf21;
}
</style>
<div id="menu">
<header>
<ul>
<li><a href="Home.aspx">Home</a></li>
<li><a href="News.aspx">News</a></li>
<li><a href="Articles.aspx">Articles</a></li>
<li><a href="Forum.aspx">Forum</a></li>
<li><a href="Contact.aspx">Contact</a></li>
<li><a href="About.aspx">About</a></li>
</ul>
</header>
</div>
回答by j08691
Change your last two CSS rules to:
将最后两个 CSS 规则更改为：
li {
display:inline-block;
}
#menu {
background-color:#98bf21;
text-align:center;
}
回答by Kyle Shevlin
margin: 0 auto;only works on items that have defined widths. However, the way you currently have it written, each a tag is attempting to center, when you really want to center the ul. Here is a great way to center that when you don't know the width of your ul. Use these styles in your header, ul and li elements. Add styling to your a tags to suit.
margin: 0 auto;仅适用于已定义宽度的项目。但是，按照您目前的编写方式，当您真正想要将 ul 居中时，每个标签都试图居中。当您不知道 ul 的宽度时，这是一个很好的居中方式。在 header、ul 和 li 元素中使用这些样式。为您的 a 标签添加样式以适应。
header {
float: left;
width: 100%;
overflow: hidden;
position: relative;
}
ul {
float: left;
list-style: none;
position: relative;
left: 50%;
}
li {
display: block;
float: left;
position: relative;
right: 50%;
}
What's going on here is we're setting the header to full width, and then pushing the ul half way across the width of the browser. Then we push the li's back half the width of the ul, which now centers them on the page.
这里发生的事情是我们将标题设置为全宽，然后将 ul 推到浏览器宽度的一半。然后我们将 li 的后推到 ul 宽度的一半，现在将它们放在页面的中心。
Here is a link with a very helpful tutorial about doing this very thing: http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
这是一个关于做这件事的非常有用的教程的链接：http: //matthewjamestaylor.com/blog/beautiful-css-central-menus-no-hacks-full-cross-browser-support
Good luck!
祝你好运！
回答by Phil Sinatra
li {
display: inline-block;
}
#menu {
background-color:#98bf21;
margin: 0 auto;
text-align: center;
width: 80%;
}
回答by John Winniard
I had the same problem until I read this post and decided to center the text in the "nav".
我遇到了同样的问题，直到我阅读了这篇文章并决定将文本集中在“导航”中。
So basically your ulshould be in a navso you can text-align: centerthe nav area.
所以基本上你ul应该在一个nav这样你可以text-align: center导航区域。
回答by antelove
nav {
width: 75%;
margin: auto
}
#menu {background-color: #98bf21}
.container{padding: 0.10em}
.cell-row {display:table; width:100%}
.cell {display: table-cell}
.cell-middle {vertical-align: middle}
a:link, a:visited {
font-weight: bold;
color: black;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {background-color: #7A991A}
@media (max-width: 500px) {
.mobile {
display: block;
width: 100%;
text-align: center
}
nav {
width: 100%;
margin: auto
}
} <nav>
<div id="menu" class="cell-row" style="text-align: center">
<div class="container cell cell-middle mobile"><a href="Home.aspx">Home</a></div>
<div class="container cell cell-middle mobile"><a href="News.aspx">News</a></div>
<div class="container cell cell-middle mobile"><a href="Articles.aspx">Articles</a></div>
<div class="container cell cell-middle mobile"><a href="Forum.aspx">Forum</a></div>
<div class="container cell cell-middle mobile"><a href="Contact.aspx">Contact</a></div>
<div class="container cell cell-middle mobile"><a href="About.aspx">About</a></div>
</div>
</nav>回答by KJ Price
Add the following css:
添加以下css：
ul {
margin: 0 auto;
display: inline-block;
}
This will make the ul fit its contents and then be centered in its container.
这将使 ul 适合其内容，然后在其容器中居中。
