align-items：中心在 flexbox 中不起作用答案

【问题标题】：align-items: center not working in flexboxalign-items：中心在 flexbox 中不起作用
【发布时间】：2020-11-06 06:45:22
【问题描述】：

我正在尝试垂直对齐位于 display: flex; 中的 nav 条的 tex。我使用了以下代码，但文本仍然与nav 容器的顶部对齐，并且不会向下移动到中心。你能帮我理解我做错了什么吗？我尝试将 align-items: center; 移动到 CSS 中的 nav{} 和 nav ul li{} 但它没有任何改变。

nav {
  background-color: aquamarine;
  width: 100%;
  height: 70px;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

nav ul li {
  font-size: 3rem;
}

<nav>
  <ul>
    <li>About Us</li>
    <li>Event Schedule</li>
    <li>Contact Us</li>
  </ul>
</nav>

【问题讨论】：

或导航{高度：继承}
移除高度并添加overflow:auto

标签： css flexbox vertical-alignment display text-align

【解决方案1】：

只需将height: 100% 添加到nav ul

nav {
  background-color: aquamarine;
  width: 100%;
  height: 70px;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}

nav ul li {
  font-size: 3rem;
}

<nav>
  <ul>
    <li>About Us</li>
    <li>Event Schedule</li>
    <li>Contact Us</li>
  </ul>
</nav>

【讨论】：

谢谢。我只是尝试过，但没有任何改变。文本仍然在顶部对齐。到目前为止，我发现唯一可行的解决方案是将nav ul 中的行高设置为与使用px 的导航栏相同。即line-height: 70px;。这就是我期待你对height:100% 的建议，所以我很惊讶它没有......也许需要改变一些其他的东西才能让它起作用？

【解决方案2】：

这些项目是垂直对齐的，或者至少它们尝试是垂直对齐的，但是您将字体大小设置得如此之大，以至于它们超出了您的固定高度容器。可能的解决方案：

不要设置字体大小。
不要固定父元素的高度。

【讨论】：

感谢您的回复。因为它是导航栏，所以我需要字体很大才能脱颖而出。到目前为止，我发现的唯一解决方法是将 line-height 设置为与作为父元素的容器 nav 相同。