CSS Align floating navbar

Question

So I've got an example of what is the header on my Tumblr Page. I don't know why I'm having so much trouble doing this, but I can't figure it out.

I've got a <ul> floating-left navbar, whose parent container has a width of 50%. I need these items to be centered below the main text, but because they float left, this is hard to accomplish.

<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;
}

I need these items to center under the main text, but nothing i've tried works. What am I doing wrong? How can I accomplish this?

Answer 1

to center a block element you need margin:0 auto but to achieve this you need to set a fixed with for the block element. So for your header #mainNav add {width:372px}` and will be ok.

Demo: http://jsfiddle.net/qTPec/2/

Another solution is to add display:inline-block for header #mainNav

Demo: http://jsfiddle.net/qTPec/3/