html - 无法在 div 中居中 ul

Question

我试图将我的导航链接置于 div 中，但无论我如何尝试，它都不起作用。我已经尝试过 margin-left:auto、margin-right:auto，但没有...

这是CSS代码部分:

#nav {
    display:block;
    background-color:#505050;
    height:17.5px;
    box-shadow: 0px 0px 15px 5px #CCCCCC inset;
    border:1px solid #EEEEEE;
    border-radius:20px;
    padding:1.5%;
}
#nav li {
    padding:0px 20px 0px 20px;
    display:inline;
    /*float:left;*/
    list-style:none;
    position:relative;
}
#nav li a {
    padding:0px 0px 20px 0px;
    color:#FFFFFF;
    text-decoration:none;
}

这是我的 ul 代码:

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Current Litters</a></li>
    <li><a href="#">Gallery</a>
        <ul>
            <li><a href="./bandi.html">Bandi</a></li>
            <li><a href="./studs.html">Studs Used</a></li>
            <li>Test Dog2</li>
            <li>Test Dog3</li>
        </ul>
    </li>
    <li><a href="#form">Contact Us</a></li>
 </ul>

这是我的其余代码 实际上没有它我注意到我在(画廊)下的下拉菜单没有正确显示，...这是该 css 文件的其余部分...显示下拉菜单发生了什么...也许你可以告诉我为什么浮子把它搞砸了……

...文本对齐效果很好...但只有在移除 float 后...

#nav li a:hover {
    text-decoration:underline;
}
#nav li ul{
    padding:10px;
    font-size:medium;
    display:none;
    position:absolute;
    left:0px;
    top:30px;
    background-color:rgba(50,50,50,0.8);
}
#nav li:hover ul {
    display:block;
    border-radius:20px;
    border:1px solid;
    width:150px;
}

Answer 1

这实际上很简单，因为您的列表项是 display:inline .添加此样式:

#nav {
    text-align:center;
}

演示:http://jsfiddle.net/fH6f5/

还有许多其他方法可以做到这一点，但这似乎就是您所需要的。只要确保不要 float <li> s(我看到你把它注释掉了)。