2

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

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

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

2 回答 2

3

您缺少text-align:center。

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

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

于 2013-08-28T20:10:05.810 回答
1

为了使用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包含导航的宽度。

于 2013-08-28T20:10:33.897 回答