將ul對齊到水平CSS菜單的中間位置

Question

我想要有一個水平菜單，但是ul對齊到右邊而不是中間。

這裏是我的CSS和HTML：

CSS：

#menu 
{ 
    clear: both; 
    float: left; 
    width: 830px; 
    display: inline; 
    position: relative; 
    z-index: 1; 
    border-top: 1px solid #e9e6d9; 
    border-bottom: 1px solid #e9e6d9; 
    margin: 0 auto; 
    background-color:#FFFFFF; 
    padding: 0; 
} 
#menu ul { 
    margin: 0; 
    display: block; 
    text-align: center; 
    padding: 0; 
    float: right; 
} 
#menu li { 
    /*font-family: Georgia, "Times New Roman", Times, serif;*/ 
    font-family: sans-serif, Helvetica, Arial; 
    font-size: 13px; 
    font-weight: normal; 
    float: left; 
    position: relative; 
    list-style: none; 
    margin: 0; 
    display: inline-block; 
    padding: 0; 
} 

HTML：

<div id="menu"> 
    <ul> 
     <li> 
      <a href="http://www.tahara.es/"> 
       <span>HOME</span> 
      </a> 
     </li> 
     <li> 
      <a href="http://www.tahara.es/shop/"> 
       <span>SHOP</span> 
      </a> 
     </li> 
    </ul> 
</div> 

預先感謝任何建議！

Answer 1

您可以移除浮動屬性。 只需爲您的#menu ul添加寬度並添加邊距：0 auto;使其居中。

例子：

#menu ul { 
    width: 300px; 
    margin: 0 auto; 
} 

現場演示這裏：http://codepen.io/joe/pen/uAaHo

Answer 2

變化#menu ul - 使用float: left代替float: right

#menu ul { 
margin: 0; 
display: block; 
text-align: center; 
padding: 0; 
float: left; 
} 

Answer 3

我能解決問題。 HTML代碼是好的，我改變了CSS代碼：

#menu 
{ 
clear: both; 
width: 830px; 
display: inline; 
position: relative; 
z-index: 1; 
border-top: 1px solid #e9e6d9; 
border-bottom: 1px solid #e9e6d9; 
margin: 0 auto; 
background-color:#FFFFFF; 
padding: 0; 
} 
#menu ul { 
margin: 0; 
display: block; 
text-align: center; 
padding: 0; 
} 
#menu li { 
    /*font-family: Georgia, "Times New Roman", Times, serif;*/ 
    font-family: sans-serif, Helvetica, Arial; 
    font-size: 13px; 
    font-weight: normal; 
    position: relative; 
    list-style: none; 
    margin: 0; 
    display: inline-block; 
    padding: 0;​ 

我基本上刪除的float:right;任何occurrency。解決你的問題就像這樣簡單。

這裏是DEMO。

如果您需要進一步的幫助，我可以幫助您。

我也建議你幾個鏈接，你可以找到爲構建CSS菜單有用：

http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/

http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-drop-down-nav-menu-with-html5-css3-and-jquery/

http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/

http://net.tutsplus.com/tutorials/design-tutorials/how-to-build-and-enhance-a-3-level-navigation-menu/

Answer 4

來定位你的菜單最簡單的代碼，很簡單。

此代碼正常工作，已在最新的Safari，Chrome，Opera，Firefox上進行測試。也在IE11和IE8上。

http://jsfiddle.net/5ZrEx/

#menu 
{ 
    width: 830px; 
    margin: 0 auto; 
    display: inline; 
} 
    #menu ul {  
    text-align: center; 
} 
#menu li {  
    display: inline-block;  
}