如何使用CSS使菜单居中

Question

I am trying to make full width menu, where the menu items are centered, but for some reason nothing i do with the alignment seems to have an effect.

Is there something I may be missing or some conflict?

I would appreciate any and all assistance very much.

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