CSS對齊浮動導航條

所以我有一個example of what is the header on my Tumblr Page。我不知道爲什麼我這麼做很麻煩，但我無法弄清楚。CSS對齊浮動導航條

我有一個<ul>浮動左側導航欄，其父容器的寬度爲50％。我需要將這些項目放在主文本下方，但是因爲它們向左浮動，這很難完成。

<nav id="mainNav"> 
    <ul>    
     <li><a href="/ask">Ask</a></li>     
     <li><a href="/archive">Archive</a></li> 
     <li><a href="/random">Random</a></li> 
     <li><a href="http://skwh.tumblr.com/rss">RSS</a></li> 
     <li><a href="javascript:;" id="btnSearch">Search</a></li> 
     <li><a href="http://twitter.com/SomekidwithHTML">Twitter</a></li> 
    </ul> 
</nav>

CSS：

header #mainNav { 
    width:auto; 
    margin:auto; 
} 
header #mainNav ul { 
    height:30px; 
    width:auto; 
} 
header #mainNav ul li { 
    list-style-type:none; 
    float:left; 
    margin:2; 
    background-color:#1BA300; 
    border:2px solid black; 
} 
header #mainNav ul li:hover { 
    background-color:black; 
} 
header #mainNav ul li a { 
    color:#00FF00; 
    display:block; 
    padding:5px; 
}

我需要這些項目的正文下居中，但沒有我試過的作品。我究竟做錯了什麼？我怎樣才能做到這一點？

來源

2012-12-16 Polyov