如何居中浮動的導航菜單？

Question

我想將我的浮動菜單（ul標籤）置於我的頁面中，無法弄清楚我的CSS有什麼問題。請幫忙。謝謝。

我的HTML

<section> 
    <div id='index'><img src='images/index_pic.png' title='index Picture'/></div> 
    <nav> 
     <ul> ////I want to center this menu, but the 3 buttons all float to left. 
      <li id=browser ><a href=#></a></li> 
      <li id=user_management><a href=#></a></li> 
      <li id=log_out><a href=#> </a></li> 
     </ul> 

    </nav> 
</section> 

和我的CSS

section { 
    color: blue; 
     margin: 0 auto; 
    color:blue; 
    width:980px; 
    height:700px; 
} 
ul{ 

    list-style:none; 
} 

#browser a{ 
    color:red; 
    width:270px; 
    height:32px; 
    display:inline-block; 
    float:left; 
    background-image:url('../images/browser_BT.jpg'); 
} 
#user_management a{ 
    color:red; 
    width:270px; 
    height:32px; 
    display:inline-block; 
    float:left; 
    background-image:url("../images/user_management_BT.jpg"); 
} 
#log_out a{ 
    color:red; 
    width:270px; 
    height:32px; 
    display:inline-block; 
    float:left; 
    background-image:url('../images/log_out_BT.jpg'); 
} 


section #index img{ 
padding:3px; 
border:1px solid #a6a6a6; 
} 

Answer 1

試試這個：

ul { 
    list-style: none; 
    width: 810px; 
    margin: 0 auto; 
}