CSS - 想要在我的导航栏 DIV 中居中 LI 元素

Question

我的博客上有一个导航栏，在几个 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>

Answer 1

这可能是一个好的、干净的开始:

http://jsfiddle.net/wXjj8/