html - 如何将导航菜单居中对齐？

Question

我需要帮助将我网站的导航菜单居中对齐。

这是我的代码。它出什么问题了？它不会将菜单与中心对齐。

HTML

<div class="menu_nav">
    <ul style="font-family:Ubuntu">
        <li><a href="index.html">Home</a></li>
        <li><a href="activities.html">Activities</a></li>
        <li><a href="games.html">Games</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="contact.html">Contact Us</a></li>
    </ul>
</div>

CSS

.menu_nav {
    text-transform: uppercase;
    margin: 0 auto;

}
.menu_nav ul {
    list-style: none;
    margin: 0 auto;

}
.menu_nav ul li {
    margin: 0 auto;
    padding: 0 auto;

}
.menu_nav ul li a {
    display:block;
    margin: 0 auto;
    padding:35px 50px;
    color:#fff;
    text-decoration:none;
    font-size:20px;
}

Answer 1

您缺少text-align:center。

.menu_nav ul {
    list-style: none;
    margin: 0 auto;
    text-align:center;
}

fiddle :http://jsfiddle.net/84exq/