CSS对齐浮动导航栏

Question

因此，我在Tumblr Page上的标题是一个示例 。 我不知道为什么我在这样做时会遇到很多麻烦，但是我无法弄清楚。

我有一个<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;
}

我需要这些项目位于正文的中心，但是我没有尝试过。 我究竟做错了什么？ 我该怎么做？

Answer 1

要使一个block元素居中，您需要margin:0 auto但是要实现这一点，您需要为该block元素设置一个固定的with。 因此，为您的header #mainNav添加{width：372px}`即可。

演示： http ： //jsfiddle.net/qTPec/2/

另一个解决方案是为header #mainNav添加display:inline-block

演示： http ： //jsfiddle.net/qTPec/3/

Answer 2

尝试display: inline-block而不是float 。 这样，您可以将其居中。

http://jsfiddle.net/qTPec/1/