Html 如何在CSS中将网站导航栏中的文本居中对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19056725/
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 align text in navigation bar of website in CSS?
提问by user2602766
I am a bit stumped as to how I can center the text on the navigation bar as at the moment it is only going to the left. I have already tried center align but it still continues to stick to the side. If anyone could tell me what error I am making this would be greatly appreciated.
我对如何将导航栏上的文本居中感到有些困惑，因为目前它只能向左移动。我已经尝试过居中对齐，但它仍然继续贴在一边。如果有人能告诉我我犯了什么错误，我将不胜感激。
HTML:
HTML：
<body>
<div id="wrap">
</div>
<ul id="nav">
<li><a href="#">About Us</a></li>
<li><a href="#">Our Products</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Login</a></li>
</ul>
<div id="content">
</div>
</body>
CSS:
CSS：
body {
margin: 0;
padding: 0;
text-align: justify;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
background-color:#425eb4;
}
*{
margin: 0 auto 0 auto;
}
#wrap {
height:150px;
background:url(images/header1.png) no-repeat center;
text-align:center;
background-color:#FFF;
}
#nav {
width: 100%;
float: left;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
#nav li {
float: left;
text-align:center; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
text-align:center;
color: #069;
border-right: 1px solid #ccc; }
#nav li a:hover {
color: #c00;
text-align:center;
background-color: #fff;}
/* End navigation bar styling. */
#content {
padding: 0 50px 50px;
width:1000px;
height:800px;
background-color:#FFF;
}
回答by Trevor
You need to take the float:leftoff of both your #navand lielements.
Then add display:inline-block;to both. Next add your text-align:centerto the #nav.
您需要float:left取消您的#nav和li元素。然后display:inline-block;两者都加。接下来将您text-align:center的添加到#nav.
#nav {
width: 100%;
display: inline-block;
text-align: center;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
margin-left: 0px; // looks like bootstrap is putting a left margin on your #nav you may want it off.
}
#nav li {
display: inline-block;
text-align:center;
}
回答by Scott
Use this CSS:
使用这个 CSS：
Take the floats off, use display:inline-blockto put the lis beside each other, and use text-align:center on the #nav. Is this what you're looking for?
取下浮标，用于display:inline-block将lis 并排放置，并使用 text-align:center 在#nav. 这是你要找的吗？
body {
margin: 0;
padding: 0;
text-align: justify;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #425eb4;
}
* {
margin: 0 auto;
}
#wrap {
height: 150px;
background: url(images/header1.png) no-repeat center;
text-align: center;
background-color: #FFF;
}
#nav {
width: 100%;
margin: 0;
padding: 0;
text-align: center;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#nav li {
display: inline-block;
text-align: center;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: 700;
text-align: center;
color: #069;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: #c00;
text-align: center;
background-color: #fff;
}
/* End navigation bar styling. */
#content {
padding: 0 50px 50px;
width: 1000px;
height: 800px;
background-color: #FFF;
}
回答by HC_
IMO adjust your CSS to be something generally like (I am omitting values specific to your code and just including generally necessary ones for your general goal):
IMO 将您的 CSS 调整为大致类似的内容（我省略了特定于您的代码的值，仅包括您的总体目标通常需要的值）：
#wrap {
width:100%;
}
#nav {
width:300px; //however wide your nav container needs
margin:auto; //this is what will center an elem, relative to its parent (in
//this case a 100% wide wrap; the 100% is relevant because it
//keeps things centered as window is resized.
}
回答by TheRocker
All good input, I think this will help someone too,,,
I use something like this usually,
It's balanced / centered / and block so all is clickable
所有好的输入，我认为这也会对某人有所帮助，我
通常使用这样的东西，它是平衡的/居中的/和块状的，所以一切都是可点击的
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
a {
display: inline-block;
width: 80px;
background-color: #dddddd;
text-align: center;
}
li {
width: 100px;
margin: auto;
display: inline;
}
p {
clear: both;
margin: 10px 5px;
text-align: center;
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
<p>Notice we are all centered</p>
<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>
</body>
