Center a <ul> list with a left float <li>'s with CSS

Question

I have to reproduce a menu like this:

+----------------------------------------------------------------------------+
        Option 1  |  Option 2  |  Option 3  |  Option 4  |  Option 5
+----------------------------------------------------------------------------+

But actually I have this:

+----------------------------------------------------------------------------+
Option 1  |  Option 2  |  Option 3  |  Option 4  |  Option 5
+----------------------------------------------------------------------------+

My code:

<ul>
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
    <li>Option 4</li>
    <li>Option 5</li>
</ul>

My actual css for that code is:

ul { list-style: none outside none; margin:0; padding: 0; }
li { float: left; margin: 0 10px; }

How I can do it?

PD: IE7 alternative if possible.

Thank you in advance!

Answer 1

Use this code for the lis instead:

li { margin: 0 10px; display: inline; }

And center your uls' contents:

ul { list-style: none outside none; margin:0; padding: 0; text-align: center; }