如何使CSS导航栏居中答案

【问题标题】：how to center css navigation bar如何使CSS导航栏居中
【发布时间】：2023-03-27 09:53:01
【问题描述】：

我正在尝试将我的 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>

【问题讨论】：

How to center <UL> in a list 的可能重复项

标签： css list menu navigation center

【解决方案1】：

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

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

jsFiddle example

【讨论】：

【解决方案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

祝你好运！

【讨论】：

【解决方案3】：

使用inline-block css 魔法:)

JSFiddle

【讨论】：

你忘了说你也改变了 ul 样式。

【解决方案4】：

li {
   display: inline-block;
}

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

      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>

【讨论】：

【解决方案7】：

添加以下css：

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

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

【讨论】：