Html 居中水平列表样式菜单

我有以下代码：

CSS

#main
{
    width:100%;
    height:120px;
    border:solid 1px #efefef;
}

#links
{
    background-color:#808080;
}

#links ul
{
    margin:0px auto;
    padding:0px;
    list-style:none;
    background-color:#eee;
    height:30px;
}

#links ul li
{
    float:left;
    margin:0px;
    list-style:none;
    padding:0px 10px;
}

#links
{
    /* .... */
    overflow-x: hidden ;
}

HTML

<div id="main">
    <div id="links">
        <ul>
            <li>Link 1</li>
            <li>Link 2</li>
            <li>Link 3</li>
            <li>Link 4</li>
            <li>Link 5</li>
            <li>Link 6</li>
        </ul>    
    </div>
</div>

链接1
链接2
链接3
链接4
链接5
链接6

列表项是动态的，所以我不能在#links层上使用固定宽度，我希望列表完全居中。上面的代码不起作用，我有多种方法，但似乎无法使列表居中

我不想使用表格，部分原因是我讨厌使用表格作为菜单，而且我最终会有水平的子菜单项

有什么建议吗

谢谢

---

Steve

以下是可能的解决方案：

添加：

text-align:center;

至

#链接

---

#links ul

将左右边距设置为自动。如果容器被告知将其内容物放在中心位置，这将使它们的大小相等。上面这一行就可以了。

给萨夫拉兹的答案一点风格细节（谢谢你也为我工作！）

当我设置左：ul的50%，左：li项目的50%。 浏览器显示一个水平滚动条，尽管没有什么可看的（滚动条在那里是因为UL产生的溢出，左50%），因此解决方案是将此样式添加到包装div（在本例中为id=links）：

CSS

#main
{
    width:100%;
    height:120px;
    border:solid 1px #efefef;
}

#links
{
    background-color:#808080;
}

#links ul
{
    margin:0px auto;
    padding:0px;
    list-style:none;
    background-color:#eee;
    height:30px;
}

#links ul li
{
    float:left;
    margin:0px;
    list-style:none;
    padding:0px 10px;
}

#links
{
    /* .... */
    overflow-x: hidden ;
}

---

“边距0自动”仅在给定宽度时有效！ 您需要使用内联块，然后文本居中对齐

ul {
    text-align: center;        
}
ul > li {
    display: inline-block;
}

---

品质！谢谢这正是我想要的。以前试过这个，但不幸的是，它不起作用。还是谢谢你！