Html 如何将导航栏与 css 居中对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28630433/
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 align navbar to center with css
提问by jas jashim
I need help to align my navbar bar to center Here is my code What's wrong with it? It does not align the menu to the center.
我需要帮助将我的导航栏对齐到中心 这是我的代码 它有什么问题？它不会将菜单与中心对齐。
#nav {
position: absolute;
left: 0px;
height: 40px;
background-color: #2C64B4;
width: 100%;
margin: 0 auto;
}
#nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#nav ul li {
margin: 0;
padding: 0;
float: left;
}
#nav ul li a {
text-decoration: none;
padding: 10px 20px;
display: block;
color: #FFF;
text-align: center;
}<div id="nav">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">About Us</a>
</li>
<li><a href="#">Blah</a>
</li>
<li><a href="#">exampl</a>
</li>
</ul>
</div>回答by Josh Crozier
One way would be to set the displayof #nav ulto inline-block. Then add text-align: centerto the parent element in order to center the child ul:
一种方法是将displayof设置#nav ul为inline-block。然后添加text-align: center到父元素以将子元素居中ul：
#nav {
position: absolute;
left: 0px;
height: 40px;
background-color: #2C64B4;
width: 100%;
text-align: center;
}
#nav ul {
margin: 0;
padding: 0;
display: inline-block;
}
Alternatively, you could also set the displayof the parent element, #navto flex, and then add justify-content: centerto center the child element horizontally.
或者，您也可以将display父元素的设置#nav为flex，然后添加justify-content: center以水平居中子元素。
#nav {
position: absolute;
left: 0px;
height: 40px;
background-color: #2C64B4;
width: 100%;
display: flex;
justify-content: center;
}
回答by raju
Not a big deal here.
这里没什么大不了的。
Just add text-align:centerto uland make lidisplay:inline-block
只需添加text-align:center到ul，并lidisplay:inline-block
HTML
HTML
<div id="nav">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">About Us</a>
</li>
<li><a href="#">Blah</a>
</li>
<li><a href="#">exampl</a>
</li>
</ul>
</div>
CSS
CSS
#nav {
position: absolute;
left: 0px;
height: 40px;
background-color: #2C64B4;
width: 100%;
margin: 0 auto;
}
#nav ul {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
#nav ul li {
margin: 0;
padding: 0;
display: inline-block;
}
#nav ul li a {
text-decoration: none;
padding: 10px 20px;
display: block;
color: #FFF;
text-align: center;
}
Check in Fiddle
回答by Swapnil Motewar
Update your css of ul as
将 ul 的 css 更新为
#nav ul {
margin: auto;
padding: 0;
overflow: hidden;
width: 60%;
}
check fiddle:
检查小提琴：
回答by Shailesh
#nav {
height: 40px;
background-color: #2C64B4;
width: 100%;
margin: 0 auto;
}
#nav ul {
margin: 0;
padding: 0;
text-align:center;
}
#nav ul li {
margin: 0;
padding: 0;
display:inline-block;
position: relative;
}
#nav ul li a {
text-decoration: none;
padding: 10px 20px;
display: block;
color: #FFF;
text-align: center;
}
Use this CSS you will got solution. Add in Li relative position, if you require drop down for some categories
使用这个 CSS 你会得到解决方案。添加 Li 相对位置，如果您需要下拉某些类别
回答by Nayan
#nav {
position: absolute;
left: 0px;
height: 40px;
background-color: #2C64B4;
width: 100%;
margin: 0 auto;
text-align:center;
}
#nav ul {
margin: auto;
padding: 0;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#nav {
position: absolute;
left: 0px;
height: 40px;
background-color: #2C64B4;
width: 100%;
margin: 0 auto;
text-align:center;
}
#nav ul {
margin: auto;
padding: 0;
overflow: hidden;
display: inline-block;
}
#nav ul li {
margin: 0;
padding: 0;
float:left;
}
#nav ul li a {
text-decoration: none;
padding: 10px 20px;
display: block;
color: #FFF;
text-align: center;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Blah</a></li>
<li><a href="#">exampl</a></li>
</ul>
</div>
</body>
</html>
overflow: hidden;
display: inline-block;
}
回答by Roi
#nav ul {
margin: auto;
padding: 0;
}
回答by Pik_at
You can set your ul to display: inline-block; and set text-align: center; to the parent nav:
你可以设置你的 ul 来显示：inline-block; 并设置文本对齐：居中；到父导航：
#nav {
position: absolute;
left: 0px;
height: 40px;
background-color: #2C64B4;
width: 100%;
text-align:center;
}
#nav ul {
margin: 0;
padding: 0;
display: inline-block;
}
