CSS - 想要在我的导航栏 DIV 中居中 LI 项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5755945/
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
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-30 00:21:49 来源:igfitidea点击:
CSS - Want to center LI items in my navbar DIV
提问by James Charless Dickinson
I have a navbar on my blog, inside a few divs. I've been tweaking it for 3 hours, but I still can't figure out why the liitems aren't centered in the middle of the navbar div. Can someone please help? Here's my code:
我的博客上有一个导航栏，在几个 div 内。我已经对其进行了 3 个小时的调整，但我仍然无法弄清楚为什么这些li项目没有居中在导航栏 div 的中间。有人可以帮忙吗？这是我的代码：
#NavbarMenu {background: #FFF; width: 100%; height: 40px;font-size: 14px; color: #3297FD; font-weight: bold; margin: 0 auto 0; padding:0px; line-height: 20px; text-align : center;}
.navbarleft{width:738px; text-align: center;}
#nav {margin: 0; padding: 0; list-style: none; text-align:center;}
#nav ul { list-style: none; margin: auto; padding: 0; text-align: center; width: 100%; background: #3297FD; }
#nav li {list-style: none; margin: 0; padding: 0; text-align:center; background: #FFF;}
#nav li a, #nav li a:link, #nav li a:visited {color: #3297FD; display: block; font-family:arial; text-transform: uppercase; font-weight: bold; margin: 0; padding: 9px 18px 9px; }
#nav li a:hover, #nav li a:active {background: #2D89E5; color: #fff; margin: 0; padding: 9px 18px 9px; text-decoration: none;height: 20px; text-align:center;}
#nav li li a, #nav li li a:link, #nav li li a:visited {background: #3297FD; width: 200px; color: #FFF; font-weight: normal; text-transform: lowercase; float: none; margin: 0; padding: 7px 10px; border-bottom: 1px solid #fff; border-left: 1px solid #fff; border-right: 0px solid #fff; text-align:center;}
#nav li li a:hover, #nav li li a:active {background:#111; color: #fff; padding: 7px 10px; text-align:center;}
#nav li {float: left; padding: 0; }
#nav li ul {z-index: 0; position: absolute; height: auto; left: -999em; width: 180px; margin-left: 50%; padding: 0; text-align:center;}
#nav li ul a {width: 180px; text-align:center;}
#nav li ul ul {margin: -32px 0 0 171px; text-align:center;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {text-align:center;}
#nav li:hover, #nav li.sfhover {position: static;
}
#main_navigation {
width: 100%;
margin-auto;
text-align : center;
}
<div id="main_navigation">
<div id='NavbarMenu">
<div class='navbarleft'><center><ul id='nav'>
<li><a href="/">Home</a></li>
<li><a href="/about.me">About</a></li>
<li><a href="/ask">Ask</a></li>
<li><a href="http://twitter.com/ThatsWhatKidsDO">Twitter</a></li>
<li><a href="/support">Submit</a></li>
<li><a href="/tagged/typography">Typography</a></li>
<li><a href="http://www.tumblr.com/directory/recommend/typography/epicjamess">Reccommend</a></li>
<li><a href="/FAQ">FAQ</a></li>
</ul></center></div></div></div></center>
采纳答案by gutierrezalex
This might be a good, clean start:
这可能是一个好的、干净的开始：
回答by Version1
try changing
尝试改变
margin-auto;
to
到
margin: 0 auto;
You should also not use center tags, as in the latest html releases center tags are deprecated.
您也不应该使用中心标签，因为在最新的 html 版本中，中心标签已被弃用。
回答by easwee
Your code is full of typos. <center>tag is deprecated.
你的代码充满了错别字。<center>标签已弃用。
<!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>
<title></title>
<style type="text/css">
#NavbarMenu {background: #FFF; width: 100%; height: 40px;font-size: 14px; color: #3297FD; font-weight: bold; margin: 0 auto 0; padding:0px; line-height: 20px; text-align : center;}
.navbarleft{width:738px; text-align: center;margin:0 auto;}
#nav {margin: 0; padding: 0; list-style: none; text-align:center;}
#nav ul {list-style:none; margin: auto; padding: 0; text-align: center; width: 100%; background: #3297FD; display: inline-block;}
#nav li {margin: 0;padding:0;text-align:center;background:#FFF;display:inline-block;}
#nav li a {display: inline-block;}
#nav li a, #nav li a:link, #nav li a:visited {color: #3297FD; display: inline-block; font-family:arial; text-transform: uppercase; font-weight: bold; margin: 0; padding: 9px 18px 9px; }
#nav li a:hover, #nav li a:active {background: #2D89E5; color: #fff; margin: 0; padding: 9px 18px 9px; text-decoration: none;height: 20px; text-align:center;}
#nav li li a, #nav li li a:link, #nav li li a:visited {background: #3297FD; width: 200px; color: #FFF; font-weight: normal; text-transform: lowercase; float: none; margin: 0; padding: 7px 10px; border-bottom: 1px solid #fff; border-left: 1px solid #fff; border-right: 0px solid #fff; text-align:center;}
#nav li li a:hover, #nav li li a:active {background:#111; color: #fff; padding: 7px 10px; text-align:center;}
#nav li {float: left; padding: 0; }
#nav li ul {z-index: 0; position: absolute; height: auto; left: -999em; width: 180px; margin-left: 50%; padding: 0; text-align:center;}
#nav li ul a {width: 180px; text-align:center;}
#nav li ul ul {margin: -32px 0 0 171px; text-align:center;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {text-align:center;}
#nav li:hover, #nav li.sfhover {position: static; }
</style>
</head>
<body>
<div id="main_navigation">
<div id="NavbarMenu">
<div class="navbarleft">
<ul id="nav">
<li><a href="/">Home</a></li>
<li><a href="/about.me">About</a></li>
<li><a href="/ask">Ask</a></li>
<li><a href="http://twitter.com/ThatsWhatKidsDO">Twitter</a></li>
<li><a href="/support">Submit</a></li>
<li><a href="/tagged/typography">Typography</a></li>
<li><a href="http://www.tumblr.com/directory/recommend/typography/epicjamess">Reccommend</a></li>
<li><a href="/FAQ">FAQ</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
This will center them. However you have to many items in the menu to fit them all in width:738px;as you specified. You will have to reduce some paddings probably.
这将使他们居中。但是，您必须在菜单中有许多项目才能width:738px;按照您的指定将它们全部放入。您可能必须减少一些填充。
