我正在尝试垂直对齐 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>最佳答案
只需将 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>https://stackoverflow.com/questions/62937395/