时间戳

首页 > 解决方案 > 导航栏中的 Flexbox：无法垂直对齐项目

html - 导航栏中的 Flexbox：无法垂直对齐项目

问题描述

我对 html 和 css 真的很陌生，所以这是我第一次完整尝试制作导航栏，导航栏中的项目粘在页面顶部，请告诉我哪里出了问题

https://codepen.io/galia-s/pen/GRojmwV

.flex-content {
  display: flex;
  margin: auto 3.25rem;
  align-items: center;
}

标签： htmlcssflexbox

解决方案

而不是align-content，您可能正在查看align-items，这取决于您要实现的目标。我假设您想将这些项目居中。

所以你的.flex-content班级可能看起来像这样：

.flex-content {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    height: 5rem; //set height here instead of header
}

希望能帮助到你。

推荐阅读