CSS水平对齐浮动

我有一个简单的菜单，我想要把它放在页面的中心使用CSS。这里的菜单：http://jsfiddle.net/kSV4K/4/CSS水平对齐浮动

这里的代码，CSS ：

ul#menu { margin:0; padding:0; list-style-type:none; } 
ul#menu li { position:relative; float:left; border-bottom:4px solid #efefef; margin-right: 0px; padding-right: 0px; padding-bottom: 5px;} 
ul#menu .current { border-bottom:4px solid #3d496a;} 
ul#menu li:hover { border-bottom:4px solid #3d496a;} 
ul#menu li a { padding:2px 2px; text-decoration:none; font:bold 8px Verdana, Georgia, "Times New Roman", Times, serif; color:#68759c;} 
ul#menu li a:hover { color:#8895b8; border:none; }

HTML：

<ul id="menu"> 
    <li class="current"><a href="#" data-id="div1">Description</a></li> 
    <li><a href="#" data-id="div2">Shipping and payment</a></li> 
    <li><a href="#" data-id="div3">Returns</a></li> 
    <li><a href="#" data-id="div4">Feedback</a></li> 
</ul>

有什么建议？

来源

2013-06-12 user2401856

我强烈建议把更多的上下文放到你的小提琴中：应用于容器和周围元素的样式可能会影响这个定位。另外请注意，ul＃菜单在某种程度上是不好的选择。你应该只在页面上有一个id为“menu”的项目，所以不需要以ul作为前缀。 –

代替浮点数，在li元素上使用内联块，然后它们可以在ul块上应用text-align: center居中。

ul#menu { 
    margin:0; 
    padding:0; 
    list-style-type:none; 
    text-align: center; 
} 
ul#menu li { 
    display: inline-block; 
    border-bottom:4px solid #efefef; 
    margin-right: 15px; 
    padding-right: 20px; 
    padding-bottom: 5px; 
}

见琴：http://jsfiddle.net/audetwebdesign/kSV4K/3/

来源

2013-06-12 15:07:11

非常感谢：p – user2401856

您还可以添加一些宽度的菜单和应用margin: 0 auto;这里居中是我还建议你的菜单中包含一个<nav>标签或<div>里面的小提琴http://jsfiddle.net/xtatanx/swT4F/。

来源

2013-06-12 15:09:51

CSS水平对齐浮动

回答

相关问题