1

我试图将我的 CSS 导航栏居中，但无法弄清楚为什么不起作用，我在哪里做错了。我希望它在页面的顶部中心。我试过 margin:0 auto 但它不会在这里工作是我的代码：

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

7 回答 7

7

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

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

jsFiddle 示例

于 2013-06-28T15:48:32.933 回答
2

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

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

祝你好运！

于 2013-12-18T06:46:41.077 回答
1

使用inline-blockcss 魔法:)

JSFiddle

于 2013-06-28T15:51:43.693 回答
0 
li {
   display: inline-block;
}

#menu {
    background-color:#98bf21;
    margin: 0 auto;
    text-align: center;
    width: 80%;
}
于 2013-06-28T15:50:00.123 回答
0

在我阅读这篇文章并决定将文本置于“导航”中之前，我遇到了同样的问题。

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

于 2015-07-12T15:27:30.740 回答
0 

      nav {
        width: 75%;
        margin: auto
      }

      #menu {background-color: #98bf21}

      .container{padding: 0.10em}

      .cell-row {display:table; width:100%}
      .cell {display: table-cell}
      .cell-middle {vertical-align: middle}

      a:link, a:visited {
        font-weight: bold;
        color: black;
        text-align: center;
        padding: 4px;
        text-decoration: none;
        text-transform: uppercase;
      }

      a:hover, a:active {background-color: #7A991A}

      @media (max-width: 500px) {
        .mobile {
          display: block; 
          width: 100%; 
          text-align: center
        }
							
        nav {
          width: 100%;
          margin: auto
        }  
      }
    <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>

于 2017-09-27T12:57:13.620 回答
-1

添加以下CSS：

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

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

于 2013-06-28T15:47:47.557 回答