对齐导航栏

Question

我的导航栏有问题...

1. 我想将它定位到中心，但它不会这样做。
2. 我想从左到右填充。

我试图： 文本对齐：在 .navbar 中居中 text-align：在导航栏中居中。

.navbar {
  background-color: gray;
  position: fixed;
  top: 0%;
}

.navbar a {
  color: white;
  text-align: center;
  font-family: monospace;
  font-size: 20px;
  text-decoration: none;
  padding: 15px;
  display: block;
  float: left;
}

.navbar a:hover {
  background: lightgray;
  color: orange;
}

<div class="navbar">
  <a href="../index.html">Home</a>
  <a href="Guides.html">Guides</a>
  <a href="#">Clips</a>
  <a href="#">Leaderborard</a>
  <a href="Support the server.html">Support the server</a>
  <a href="Help.html">Help</a>
</div>

Answer 1

我在 CSS 源代码中记录了我所做的事情。

.navbar {
  background-color: gray;
  position: fixed;
  top: 0%;
  text-align: center; /* Added */
}

.navbar a {
  color: white;
  /* text-align: center; Removed */
  font-family: monospace;
  font-size: 20px;
  text-decoration: none;
  padding: 15px;
  display: inline-block; /* Changed from block */
  /* float: left; Removed */
}

.navbar a:hover {
  background: lightgray;
  color: orange;
}

<div class="navbar">
  <a href="../index.html">Home</a>
  <a href="Guides.html">Guides</a>
  <a href="#">Clips</a>
  <a href="#">Leaderborard</a>
  <a href="Support the server.html">Support the server</a>
  <a href="Help.html">Help</a>
</div>

Answer 2

这似乎可以使用

justify-content: center;

在容器上

.container {
  width: 100%;
  padding: 20px;
  display: flex;
  justify-content: center;
}
.navbar {
  background-color: gray;
  position: fixed;
  top: 0%;
  text-align: center; /* Added */
}

.navbar a {
  color: white;
  /* text-align: center; Removed */
  font-family: monospace;
  font-size: 20px;
  text-decoration: none;
  padding: 15px;
  display: inline-block; /* Changed from block */
  /* float: left; Removed */
}

.navbar a:hover {
  background: lightgray;
  color: orange;
}
.navbar1 {
      background-color: gray;
      display: flex;
      justify-content: center;
      top: 50%;
      text-align: center; /* Added */
    }
    
    .navbar1 a {
      color: white;
      /* text-align: center; Removed */
      font-family: monospace;
      font-size: 20px;
      text-decoration: none;
      padding: 15px;
      display: inline-block; /* Changed from block */
      /* float: left; Removed */
    }
    
    .navbar1 a:hover {
      background: lightgray;
      color: orange;
    }

   

 <div class="container">
      <div class="navbar">
        <a href="../index.html">Home</a>
        <a href="Guides.html">Guides</a>
        <a href="#">Clips</a>
        <a href="#">Leaderborard</a>
        <a href="Support the server.html">Support the server</a>
        <a href="Help.html">Help</a>
      </div>
    </div>
<div class="navbar1">
            <a href="../index.html">Home</a>
            <a href="Guides.html">Guides</a>
            <a href="#">Clips</a>
            <a href="#">Leaderborard</a>
            <a href="Support the server.html">Support the server</a>
            <a href="Help.html">Help</a>
          </div>