css - 将宽度未知的 float 左菜单居中

Question

我想让我的菜单Ul的李元素在中心，我试了很多方法都不行。看看我的 CSS:

#menu {
    float: left;
    width: 767px;
    height: 38px;
    margin: 11px 0 0 14px;
    background: url(images/menubg.gif) repeat-x;
    -webkit-border-radius: 0px 0px 7px 7px;
    border-radius: 0px 0px 7px 7px;
    border: 1px solid #efeff1;
}
    #menu ul {
        list-style: none;
        text-align: center;
        padding: 0;
        margin: 0;
        height: 40px;
    }
        #menu ul li {
            float: left;
            color: #767676;
            height: 18px;
            padding: 11px 0px 11px 0px;
            display: inline;
        }
            #menu ul li a {
                font-family: Arial, Helvetica, sans-serif;
                color: inherit;
                font-size: 12px;
                text-decoration: none;
                font-weight: bold;
                display: block;
                padding: 0px 23px 2px 23px;
                border-left: 1px solid #e0e0e2;
            }

我试过 display: inline, text-aling: center，但都不对。 非常感谢。

Answer 1

我删除了 float 并添加了 inline-block:

http://jsfiddle.net/dtTdg/1/

#menu ul li {
    display: inline-block;