将ul对齐到水平CSS菜单的中间位置

我想要有一个水平菜单，但是ul对齐到右边而不是中间。将ul对齐到水平CSS菜单的中间位置

这里是我的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>

预先感谢任何建议！

来源

2012-12-31 samyb8

您可以移除浮动属性。只需为您的#menu ul添加宽度并添加边距：0 auto;使其居中。

例子：

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

现场演示这里：http://codepen.io/joe/pen/uAaHo

来源

2012-12-31 01:24:23

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

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

来源

2012-12-31 01:07:22 agim

不仅浮动：权是错误的，他也可以避免使用float属性。没有必要漂浮：离开 – Fabio

我能解决问题。 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/

来源

2012-12-31 01:24:11 Fabio

来定位你的菜单最简单的代码，很简单。

此代码正常工作，已在最新的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;  
}

来源

2014-05-16 14:52:19

将ul对齐到水平CSS菜单的中间位置

回答

相关问题