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;
}

小提琴：http://jsfiddle.net/84exq/

Answer 2

为了使用margin: auto来居中，您需要定义您居中的元素的宽度。您可以以像素，点（pt），em或百分比值来定义它。所以要修复它，你应该使用这个CSS：

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

另外，要以内联方式显示链接，请使用display: inline;元素上的li属性，并从display: block元素中删除a属性：

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

jsfiddle here：请注意，我定义了周围div的宽度，但仍然定义了包含导航的ul的宽度。

如何将导航菜单对齐到中心？

2 个答案: