Yet another "how to center my menu?" question

I have a fairly standard CSS driven drop down menu (the CSS for the lists & list items is below, if needed). All that I want to do it, is to center it in the browser (must support MS IE 7) ... but that seems to escape me :-(

Can somebody help me with this? Maybe a simple example? But really, I think that I probably just need a CSS class definition for an enclosing DIV ...

/*Color navigation bar normal mode*/  
.menu a,  
.menu a:visited {font-family:Arial, Helvetica, sans-serif;font-style:normal;font- weight:bold;font-size:12px;color: #000000;background-color: #FFFFFF;text-decoration: none;}  
.menu ul {list-style-type:none;padding:0; margin:0;}  
.menu ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; margin-right: 4px; border:solid 1px #004080; }  
.menu ul li a {color: #000000;background: #FFFFFF;float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }    
.menu ul li ul {display:none; border:none;color: #000000; background: #FFFFFF;}  
.menu ul li:hover a {background-color:#d7f1ff; text-decoration:none; color:#000000;}     
/*Color main cells hovering mode*/   
.menu ul li:hover ul {display:block;  position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}  
.menu ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#FFFFFF;  color:#000000;}   
/*Color subcells normal mode*/
.menu ul li:hover ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;} /*Color subcells hovering mode*/  
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;color: #000000;background: #FFFFFF;}  
.menu ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;} 
/*Color main cells hovering mode*/
.menu ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }  
.menu ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#FFFFFF;  color:#000000;}   
/*Color 开发者_运维知识库subcells normal mode*/
.menu ul li a:hover ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;}   
/*Color subcells hovering mode*/
.menu ul li a:hover ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;} /*Color subcells hovering mode*/

You can do it with the link g.b sent, but you can also do it by using display:inline-block; which will result in less code.

See this jsfiddle: http://jsfiddle.net/4Q5N2/

<div>
    <ul>
        <li>center</li>
        <li>menu</li>
    </ul>
</div>

-

div { background:orange; }
ul {
    list-style:none;
    text-align:center;
}
ul li {
    display:inline-block;
    zoom:1;
    *display:inline;
    margin:5px;
    background:purple;
}