导航栏不会显示在网页的中心

Question

所以我的问题是我的导航栏不会显示在屏幕中央（水平），我不明白为什么，这是我经常遇到的问题，所以如果你能提供帮助，我们将不胜感激。这是代码

的 link

body {
  width: 100%;
  margin: 0;
  padding: 0;
}

/*******************
HEADER
*******************/
#logo {
  display: block;
  margin: 0 auto;
  height: 14em;
}

#name {
  text-align: center;
}

/*******************
NAV BAR
*******************/

nav ul {
  list-style-type: none;
  overflow: hidden;
  text-align: center;
}

nav li {
  float: left;
  display: inline-block;
}

nav li a {
  display: block;
  text-align: center;
  text-decoration: none;
}

  <body>
    <header>
      <img id="logo" src="img/under-construction.png" />
      <h1 id="name">Team Kangoo Anywhere</h1>
      <nav>
        <ul>
          <li><a href="home.html"></a>Home</li>
          <li><a href="about-us.html"></a>About Us</li>
          <li><a href="about-the-rally.html"></a>About The Rally</li>
          <li><a href="our-car.html"></a>Our Car</li>
          <li><a href="charities.html"></a>Charities</li>
          <li><a href="sponsors.html"></a>Sponsors</li>
          <li><a href="contact-us.html"></a>Contact Us</li>
        </ul>
      </nav>
    </header>

Answer 1

改变

nav li {
  float: left;
  display: inline-block;
}

至

nav li {
  // Remove float
  display: inline-block;
}

Answer 2

使用 div 标记向导航添加包装器，使导航显示内联并在 div 上使用文本对齐。

<div style="text-align:center"><nav style="display:inline-block">

... 然后 google Bootstrap

Answer 3

删除 float: left 后，您可以将 display: flex 用于 <ul> 或 display: inline 用于其子 <li>。

并且您在 <ul> 中有不需要的 left padding，最好将其删除以使其成为真正的中心。

ul { margin: 0; padding: 0; }

你可以看看this post.

Answer 4

理想情况下，你应该有一些 header css 来居中它的内容，然后你可以按你想要的任何方式对齐 nav li 。我创建了一个 fiddle（与代码片段相同）来演示，并向 li 元素添加了填充（否则它们会被压在一起）

希望对您有所帮助。

body {
  width: 100%;
  margin: 0;
  padding: 0;
}


/*******************
HEADER
*******************/

header {
  display: block;
  margin: 0 auto max-height: 20em;
}

#logo {
  display: block;
  margin:auto;
  height: 14em;
}

#name {
  text-align: center;
}


/*******************
NAV BAR
*******************/
/*nav{text-align:center;}*/
nav ul {
  list-style-type: none;
  overflow: hidden;
  text-align: center;
}

nav li {
  float: left;
  display: inline-block;
  padding-right: 7px;
}

nav li a {
  display: block;
  text-align: center;
  text-decoration: none;
}

<header>
  <img id="logo" src="img/under-construction.png" />
  <h1 id="name">Team Kangoo Anywhere</h1>
  <nav>
    <ul>
      <li>
        <a href="home.html"></a>Home</li>
      <li>
        <a href="about-us.html"></a>About Us</li>
      <li>
        <a href="about-the-rally.html"></a>About The Rally</li>
      <li>
        <a href="our-car.html"></a>Our Car</li>
      <li>
        <a href="charities.html"></a>Charities</li>
      <li>
        <a href="sponsors.html"></a>Sponsors</li>
      <li>
        <a href="contact-us.html"></a>Contact Us</li>
    </ul>
  </nav>
</header>

导航栏不会显示在网页的中心

Navigation Bar Wont Display In The Center Of The Webpage

html

css

navigationbar