Question

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添加到暂停div：

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

然后从width中移除ul并设置display:inline-block，以便将其有效地视为文本内容，并将中心应用于父级。移除宽度意味着它可以根据其“自然宽度”进行居中

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

HTML中心是一个无序列表

1 个答案:

Demo Fiddle