我怎样才能使导航栏中的列表项准确居中？

Question

我试图让一切都居中。我不明白是什么导致两边的 space 不相等：

header {
  text-align: center;
  border: solid pink;
}

body {
  font-family: 'Lora', serif;
  margin: 0;
}

h1 {
  color: #143774;
  font-family: lora;
  margin-bottom: 1px;
  font-size: 3.375;
}

ul {
  display: flex;
  justify-content: space-around;
  border: solid blue;
}

li {
  list-style: none;
  color: #707070;
  font-family: 'Ubuntu', sans-serif;
  text-transform: uppercase;
  border: solid red;
  margin: 0 1em;
}

<body>
  <header>
    <logo>
      <h1> Living the simple life</h1>
      <p> a blog exploring minimalism in life</p>
    </logo>
    <nav>
      <ul>
        <li>home</li>
        <li>about me</li>
        <li>recent posts</li>
      </ul>
    </nav>
  </header>
</body>

Answer 1

您的列表项居中对齐，但标签的长度不同，因此旁边的 space 不均匀。

听起来您希望整个列表居中而不是每个项目居中。要在两侧具有相等的填充，请使用 space-between 而不是 space-around 并在列表中设置填充。

但是，您会注意到，这在视觉上造成了不平衡，因为现在中间的项目移到了一侧。您的原始布局可能会更好。

header {
  text-align: center;
  border: solid pink;
}

body {
  font-family: 'Lora', serif;
  margin: 0;
}

h1 {
  color: #143774;
  font-family: lora;
  margin-bottom: 1px;
  font-size: 3.375;
}

ul {
  display: flex;
  justify-content: space-between; /* <-- updated */
  border: solid blue;
  padding: 0 30px; /* <-- specific padding value */
}

li {
  list-style: none;
  color: #707070;
  font-family: 'Ubuntu', sans-serif;
  text-transform: uppercase;
  border: solid red;
  margin: 0 1em;
}

<body>
  <header>
    <logo>
      <h1> Living the simple life</h1>
      <p> a blog exploring minimalism in life</p>
    </logo>
    <nav>
      <ul>
        <li>home</li>
        <li>about me</li>
        <li>recent posts</li>
      </ul>
    </nav>
  </header>
</body>

Answer 2

在您的 ul flex 显示器上使用 space-between 并从 ul 中删除默认填充并删除您在 li 上设置的边距。

header {
  text-align: center;
  border: solid pink;
}

body {
  font-family: 'Lora', serif;
  margin: 0;
}

h1 {
  color: #143774;
  font-family: lora;
  margin-bottom: 1px;
  font-size: 3.375;
}

ul {
  display: flex;
  justify-content: space-between;
  border: solid blue;
  padding: 0;
}

li {
  list-style: none;
  color: #707070;
  font-family: 'Ubuntu', sans-serif;
  text-transform: uppercase;
  border: solid red;
}

<body>
  <header>
    <logo>
      <h1> Living the simple life</h1>
      <p> a blog exploring minimalism in life</p>
    </logo>
    <nav>
      <ul>
        <li>home</li>
        <li>about me</li>
        <li>recent posts</li>
      </ul>
    </nav>
  </header>
</body>

我怎样才能使导航栏中的列表项准确居中？

How can I center exactly the list items on the nav?

html

css

html-lists