How do you center a line-wrapped <nav> menu in CSS?

Question

I have a UL that is centered properly in wide and narrow widths but breaks in the mid range. When it is wide everything fits nice, when the browser is narrow everything stacks nice, but when using a mid width, say 800px wide, the menu wraps to the next line, which works for now, but I would like to see if it was possible to center the second row of links. Here is a screenshot of how it looks on top (red circle), and what I want it to do on the bottom (green circle).

If you look at another thread, you will see kind of how my menu works right now in his example link. If you shrink the browser on his example you will notice the menu wraps and the second row is left aligned.

I would like to have the second row centered under the first row like in the picture above. Is this possible?

Here is the HTML:

<div id="navContainer" 
    <ul>
        <li class="menu_home"><a href="/">Home</a></li>
        <li class="menu_gallery squished"><a href="/galleryIntro.php">Gallery of Properties</a></li>
        <li class="menu_service"><a href="/service.php">Service Options</a></li>
        <li class="menu_contact"><a href="/contact.php">Contact Us</a></li>
        <li class="menu_test"><a href="/panos/laakona2/">Testing HotSpots</a></li>
    </ul>
</div>

I don't think the CSS is needed since it isn't working like I want it to anyway (and it is spread out through about 38 different CSS files, everything is floating left, but I can add the css here if you think it might help, but I am willing to scrap everything anyway...)

Answer 1

Add

text-align:center;

to .nav ul in your Tinkerbin example.

or:

   #navContainer ul {
         text-align:center;
    }

to your own css