对齐项目：中心在 Flexbox 中不起作用

Question

我正在尝试垂直对齐nav中的条形的 tex display: flex;。我使用了以下代码，但文本仍然与nav容器的顶部对齐，并且不会向下移动到中心。你能帮我理解我做错了什么吗？我尝试过在 CSS 中移动align-items: center;到nav{}andnav 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>

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