Html 在页面中心对齐导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19279343/
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
Aligning navigation bar in the center of page
提问by Jasmine078
This is my CSS code for a navigation bar:
这是我的导航栏 CSS 代码：
ul {
overflow:hidden;
margin: 0;
padding: 0;
align: center
list-style-type: none;
}
li {
float: left}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
Currently, the bar is aligned to the left, and I want it in the center. Can someone please explain how to do this? What do I need to type if I input an additional line of code, and where would it be?
目前，该栏与左侧对齐，我希望它在中心。有人可以解释一下如何做到这一点吗？如果我输入额外的一行代码，我需要输入什么，它会在哪里？
This is the code from part of my HTML mark up:
这是我的 HTML 标记部分的代码：
<body>
<ul>
<li><a href=csshomepage.html>Home</a></li>
<li><a href="#images">Images</a></li>
<li><a href="#links">Links</a></li>
</ul>
回答by LinkinTED
Display the liinline and the anchor as inline-block.
将li内联和锚点显示为inline-block。
ul {
margin: 0;
padding: 0;
text-align: center
}
li {
display: inline;
list-style: none;
}
a:link,a:visited
{
display:inline-block;
margin-right: -4px;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
回答by Jam Dizon
Set this to your menu.css (if your navigation would be considered you menu bar)
将此设置为您的 menu.css （如果您的导航将被视为您的菜单栏）
This contains the .css codes needed for a centered navigation
回答by Paulie_D
To centre the ul, you should apply a a width or max-width then
要居中ul，您应该应用 aa width 或 max-width 然后
ul {
margin:0 auto;
}
