Question

我试图将我的CSS导航栏中心但是无法弄清楚为什么不能正常工作，我在哪里做错了。我希望它在页面的顶部中心。我试过保证金：0自动，但它不会工作这是我的代码：

<style>
    ul {
        list-style-type: none;
        padding: 0;
        overflow:hidden;
    }
    a:link,a:visited {
        margin:0 auto;
        display:block;
        width: 120px;
        font-weight:bold;
        color:#FFFFFF;
        text-align:center;
        padding:4px;
        text-decoration:none;
        text-transform:uppercase;
    }
    a:hover, a:active {
        background-color:#7A991A;
    }
    li {
        float: left;
    }
    #menu {
        background-color:#98bf21;
    }
</style>
<div id="menu">
        <header>
        <ul>
            <li><a href="Home.aspx">Home</a></li>
            <li><a href="News.aspx">News</a></li>
            <li><a href="Articles.aspx">Articles</a></li>
            <li><a href="Forum.aspx">Forum</a></li>
            <li><a href="Contact.aspx">Contact</a></li>
            <li><a href="About.aspx">About</a></li>
        </ul>
    </header>
    </div>

Answer 1

将最后两个CSS规则更改为：

li {
    display:inline-block;
}
#menu {
    background-color:#98bf21;
    text-align:center;
}

<强> jsFiddle example

Answer 2

使用inline-block css magic：）

JSFiddle

Answer 3

margin: 0 auto;仅适用于已定义宽度的项目。然而，当你真正想要以ul为中心时，你当前编写的方式，每个标签都试图居中。当你不知道ul的宽度时，这是一个很好的中心方法。在header，ul和li元素中使用这些样式。为您的标签添加样式以适应。

header {
    float: left;
    width: 100%;
    overflow: hidden;
    position: relative;
}
ul {
    float: left;
    list-style: none;
    position: relative;
    left: 50%;
}
li {
    display: block;
    float: left;
    position: relative;
    right: 50%;
}

这里发生的是我们将标题设置为全宽，然后将ul推到浏览器宽度的一半。然后我们将li推回到ul的宽度的一半，现在将它们放在页面上。

以下是一个非常有用的教程链接：http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

祝你好运！

Answer 4

li {
   display: inline-block;
}

#menu {
    background-color:#98bf21;
    margin: 0 auto;
    text-align: center;
    width: 80%;
}

Answer 5

在我阅读这篇文章之前我遇到了同样的问题，并决定将文本置于＆＃34; nav＆＃34;中。

所以基本上你的ul应该在nav，所以你可以text-align: center导航区域。

Answer 6

    <nav>
      <div id="menu" class="cell-row" style="text-align: center">
        <div class="container cell cell-middle mobile"><a href="Home.aspx">Home</a></div>
        <div class="container cell cell-middle mobile"><a href="News.aspx">News</a></div>
        <div class="container cell cell-middle mobile"><a href="Articles.aspx">Articles</a></div>
        <div class="container cell cell-middle mobile"><a href="Forum.aspx">Forum</a></div>
        <div class="container cell cell-middle mobile"><a href="Contact.aspx">Contact</a></div>
        <div class="container cell cell-middle mobile"><a href="About.aspx">About</a></div>
      </div>
    </nav>

{{1}}

Answer 7

添加以下css：

ul {
    margin: 0 auto;
    display: inline-block;
}

这将使ul符合其内容，然后在其容器中居中。

如何居中css导航栏

7 个答案: