Css 又一个",；如何将我的菜单居中？”；问题

我有一个相当标准的CSS驱动的下拉菜单（列表和列表项的CSS在下面，如果需要的话）。我想做的就是把它放在浏览器的中心（必须支持MSIE7）。。。但我似乎没有意识到：-(

有人能帮我吗？也许是一个简单的例子？但实际上，我认为我可能只需要一个封闭DIV的CSS类定义

/*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*/

---

您可以使用发送的链接g.b来执行此操作，但也可以使用

display:inline block；

来执行此操作，这将减少代码量

请参阅此JSFIDLE：

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