如何使用CSS居中菜單

Question

我正在嘗試使全寬菜單，其中的菜單項居中，但由於某種原因，我沒有做與對齊似乎有一個效果。

有什麼我可能會失蹤或一些衝突？

我會很感激任何和所有的幫助。

#menu-bar { 
 
    left: -2px; 
 
    width: 100%; 
 
    margin: 0px 0px 0px 0px; 
 
    padding: 6px 6px 4px 6px; 
 
    /*height: 40px;*/ 
 
    line-height: 100%; 
 
    border-radius: 0px; 
 
    -webkit-border-radius: 0px; 
 
    -moz-border-radius: 0px; 
 
    box-shadow: 2px 2px 3px #666666; 
 
    -webkit-box-shadow: 2px 2px 3px #666666; 
 
    -moz-box-shadow: 2px 2px 3px #666666; 
 
    background: #C2C2C2; 
 
    border: double 1px #6D6D6D; 
 
    position: relative; 
 
    z-index: 999; 
 
    top: -9px; 
 
    left: -9px; 
 
    width: 105%; 
 
} 
 
#menu-bar li { 
 
    margin: 0px 0px 0px 0px; 
 
    padding: 0px 6px 0px 6px; 
 
    float: left; 
 
    position: relative; 
 
    list-style: none; 
 
} 
 
#menu-bar a { 
 
    font-weight: bold; 
 
    font-family: 'arial black'; 
 
    font-style: normal; 
 
    font-size: 12px; 
 
    color: #0A0A0A; 
 
    text-decoration: none; 
 
    display: block; 
 
    padding: 7px 20px 6px 20px; 
 
    margin: 0; 
 
    margin-bottom: 0px; 
 
    border-radius: 0px; 
 
    -webkit-border-radius: 0px; 
 
    -moz-border-radius: 0px; 
 
    text-shadow: 0px 0px 3px #FFFFFF; 
 
} 
 
#menu-bar li ul li a { 
 
    margin: 0; 
 
} 
 
#menu-bar .active a, 
 
#menu-bar li:hover > a { 
 
    background: #C2C2C2; 
 
    color: #000000; 
 
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2); 
 
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2); 
 
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2); 
 
    text-shadow: 0px 0px 3px #FFFFFF; 
 
} 
 
#menu-bar ul li:hover a, 
 
#menu-bar li:hover li a { 
 
    background: none; 
 
    border: none; 
 
    color: #666; 
 
    -box-shadow: none; 
 
    -webkit-box-shadow: none; 
 
    -moz-box-shadow: none; 
 
} 
 
#menu-bar ul a:hover { 
 
    background: #FFFFFF !important; 
 
    color: #000000 !important; 
 
    border-radius: 0; 
 
    -webkit-border-radius: 0; 
 
    -moz-border-radius: 0; 
 
    text-shadow: 2px 2px 3px #FFFFFF; 
 
} 
 
#menu-bar li:hover > ul { 
 
    display: block; 
 
} 
 
#menu-bar ul { 
 
    background: #DDDDDD; 
 
    background: linear-gradient(top, #FFFFFF, #CFCFCF); 
 
    background: -ms-linear-gradient(top, #FFFFFF, #CFCFCF); 
 
    background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF)); 
 
    background: -moz-linear-gradient(top, #FFFFFF, #CFCFCF); 
 
    display: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 185px; 
 
    position: absolute; 
 
    /*top: 31px;*/ 
 
    left: 0; 
 
    border: solid 1px #B4B4B4; 
 
    border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
    -moz-border-radius: 10px; 
 
    -webkit-box-shadow: 2px 2px 3px #222222; 
 
    -moz-box-shadow: 2px 2px 3px #222222; 
 
    box-shadow: 2px 2px 3px #222222; 
 
} 
 
#menu-bar ul li { 
 
    float: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#menu-bar ul a { 
 
    padding: 10px 0px 10px 15px; 
 
    color: #424242 !important; 
 
    font-size: 12px; 
 
    font-style: normal; 
 
    font-family: arial; 
 
    font-weight: normal; 
 
    text-shadow: 2px 2px 3px #FFFFFF; 
 
} 
 
#menu-bar ul li:first-child > a { 
 
    border-top-left-radius: 10px; 
 
    -webkit-border-top-left-radius: 10px; 
 
    -moz-border-radius-topleft: 10px; 
 
    border-top-right-radius: 10px; 
 
    -webkit-border-top-right-radius: 10px; 
 
    -moz-border-radius-topright: 10px; 
 
} 
 
#menu-bar ul li:last-child > a { 
 
    border-bottom-left-radius: 10px; 
 
    -webkit-border-bottom-left-radius: 10px; 
 
    -moz-border-radius-bottomleft: 10px; 
 
    border-bottom-right-radius: 10px; 
 
    -webkit-border-bottom-right-radius: 10px; 
 
    -moz-border-radius-bottomright: 10px; 
 
} 
 
#menu-bar:after { 
 
    content: "."; 
 
    display: block; 
 
    clear: both; 
 
    visibility: hidden; 
 
    line-height: 0; 
 
    height: 0; 
 
} 
 
#menu-bar { 
 
    display: inline-block; 
 
} 
 
html[xmlns] #menu-bar { 
 
    display: block; 
 
} 
 
* html #menu-bar { 
 
    height: 1%; 
 
}

<ul id="menu-bar"> 
 
    <li class="active"><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">Products</a> 
 
    <ul> 
 
     <li><a href="#">Products Sub Menu 1</a> 
 
     </li> 
 
     <li><a href="#">Products Sub Menu 2</a> 
 
     </li> 
 
     <li><a href="#">Products Sub Menu 3</a> 
 
     </li> 
 
     <li><a href="#">Products Sub Menu 4</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Services</a> 
 
    <ul> 
 
     <li><a href="#">Services Sub Menu 1</a> 
 
     </li> 
 
     <li><a href="#">Services Sub Menu 2</a> 
 
     </li> 
 
     <li><a href="#">Services Sub Menu 3</a> 
 
     </li> 
 
     <li><a href="#">Services Sub Menu 4</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">About</a> 
 
    </li> 
 
    <li><a href="#">Contact Us</a> 
 
    </li> 
 
</ul>

Answer 1

#menu-bar { text-align:center; } 
#menu-bar ul { text-align: left; } 
#menu-bar > li { float:none; display:inline-block; }