Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

理想情况下，你应该有一些header css来集中它的内容，然后你可以按照你想要的方式对齐导航。我创建了一个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>

Answer 2

更改

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

到

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

Answer 3

使用div标签向导航器添加包装器，使导航显示内联并在div上使用text-align。

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

...然后google Bootstrap

Answer 4

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

<ul>中有一个不需要的左边填充，最好将其移除以使其成为真正的中心。

ul { margin: 0; padding: 0; }

您可以查看this帖子。

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

4 个答案: