Html 居中对齐水平导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8129855/
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
Center Aligning A Horizontal Navigation Bar
提问by Galeforce
I am having a slight problem aligning my Horizontal Navigation bar to the center of the browser. Now before I put forward this query, I want to indicate that I'm new to HTML and CSS so bear with me on what is undoubtedly a quick fix!
我在将水平导航栏与浏览器中心对齐时遇到了一个小问题。现在在我提出这个查询之前，我想表明我是 HTML 和 CSS 的新手，所以请耐心等待，这无疑是一个快速解决方案！
The header and footer are to be full width with a fixed content section in the center of the browser. The navigational bar is to sit underneath the header. At present, the bar is aligning itself to the left but it won't seem to budge without losing its shape.
页眉和页脚是全宽的，在浏览器的中心有一个固定的内容部分。导航栏位于标题下方。目前，酒吧正在向左对齐，但它似乎不会在不失去形状的情况下移动。
The HTML:
HTML：
<body>
<div id="header">
<div class="wrap">
<img src="images/logo_header.png" alt="Image alt." />
</div>
</div>
<div id="nav">
<div class="wrap">
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><a href="#">Option 4</a></li>
<li><a href="#">Option 5</a></li>
<li><a href="#">Option 6</a></li>
</ul>
</div>
</div>
<div id="content"><div class="wrap">Content</div></div>
<div id="footer"><div class="wrap">Footer</div></div>
</body>
and the CSS:
和 CSS：
body {
margin:0;
padding:0;
font-family:verdana;
}
.wrap {
position:relative;
margin:0 auto;
width:960px;
}
#header {
float:left;
width:100%;
background-color:#FFCC33;
}
#nav {
float:left;
background-color:#FFCC33;
border-top:2px solid #000000;
}
#nav ul {
list-style:none;
display:inline;
margin:0px;
padding:0px;
}
#nav li {
display:inline;
line-height:1.8em;
}
采纳答案by MCannon
try this:
尝试这个：
<body>
<div id="header">
<div class="wrap">
<img src="images/logo_header.png" alt="Image alt." />
</div>
</div>
<div class="container">
<div id="nav">
<div class="wrap">
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><a href="#">Option 4</a></li>
<li><a href="#">Option 5</a></li>
<li><a href="#">Option 6</a></li>
</ul>
</div>
</div>
</div>
<div id="content"><div class="wrap">Content</div></div>
<div id="footer"><div class="wrap">Footer</div></div>
</body>
.container{width:980px;margin:0 auto;text-align:center;}
.nav{float:left; text-align:left;}
回答by amelvin
If you add a style of:
如果添加样式：
#nav .wrap {text-align:center; }
This will center align the nav links.
这将使导航链接居中对齐。
See this fiddle.
看到这个小提琴。
回答by Mrinal Raj
try doing this For HTML
尝试这样做对于 HTML
<nav class="computer">
<div class="container">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">About</a></li>
<li><a href="#">services</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
</nav>
for css:
对于 CSS：
nav{
width: 100%;
.container{
width: 50vw;
margin: 0 auto;
ul{
text-align: center;
li{
width: 10vw;
}
}
}
}
as i had 5 items i used 50 vw for container and 10 vw for each items.. this align the navbar perfectly centered. dont remember to use the meta tag for viewport
因为我有 5 件物品，所以我使用 50 vw 作为容器，每件物品使用 10 vw。这使导航栏完全居中对齐。不记得对视口使用元标记
<meta name="viewport" content="width=device-width, initial-scale=1"/>
NOTE: i am using LESS here for css
注意：我在这里为 css 使用了 LESS
