HTML 居中无序列表

Question

我有这个代码:http://jsfiddle.net/5krBj/

HTML

<div id="main-nav">
    <ul>
        <li> <a href="home.html">Home</a>
        </li>
        <li> <a href="vegetables.html">My Stuff</a>
        </li>
        <li> <a href="documentation.html">Log in</a>
        </li>
        <li> <a href="usabilitytest.html">Register</a>
        </li>
        <li> <a href="login.html">Contact Us</a>
        </li>
    </ul>
</div>

CSS

#main-nav ul {
    width: 100%;
    list-style: none;
    margin: 10px;
    padding: 0 0 0 30px;
    list-style: none;
}
#main-nav ul li {
    float: left;
    font-size: 13px;
    position: relative;
    z-index: 9999;
    font-weight: bold;
    margin-right: 6px;
}
#main-nav ul li a {
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    display: block;
    font-size:20px;
    float: left;
    height: 25px;
    padding: 9px 12px 0;
    text-decoration: none;
    color: #92CD00;
}
#main-nav ul li a:hover {
    text-shadow: 1px 1px black;
    border: 2px solid #266A2e;
    border-style: outset;
    border-radius: 100%;
    -webkit-animation-duration: 1s;
    -o-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 0.3s ease-in-out;
}

我正在尝试将此列表水平对齐到屏幕中央。

I have followed this question但它对我不起作用。

Answer 1

你需要添加 text-align:center 到 holding div:

#main-nav{
    text-align:center;
}

然后从您的 ul 中删除 width 并设置 display:inline-block 以便它被有效地视为文本内容，并且主题到应用于 parent 的居中。去除宽度，意味着它可以根据其“自然宽度”居中

#main-nav ul {
    list-style: none;
    margin: 10px;
    padding: 0 0 0 30px;
    list-style: none;
    display:inline-block;
}

Demo Fiddle