Html 弹性项未在导航栏中垂直对齐

我正在尝试使我的两个ULs在中心垂直对齐（横轴）。我是在Sass中做的，我可能会感到困惑，因为有太多的筑巢。我所说的ul是nav的直接产物，即“nav主列表”和“nav社会列表”

这是我的HTML代码：

*{
保证金：0；
填充：0；
}
身体{
背景#f3c6；
}
保险商实验室{
列表样式类型：无；
}
a{
文字装饰：无；
颜色：继承；
}
导航{
背景色：#D42E；
高度：3雷姆；
宽度：100%；
显示器：flex；
弯曲方向：行；
对齐项目：居中；
证明项目：中心；
证明内容：中心；
颜色：白烟；
}
导航ul{
身高：100%；
宽度：50%；
显示器：flex；
弯曲方向：行；
对齐项目：居中；
保证金：0.2rem；
}
李国荣{
身高：100%；
保证金：0；
页边顶部：自动；
填充：0.5雷姆；
}
nav ul li:悬停{
颜色：#D42E；
背景：白烟；
}
导航ulli：悬停ul{
保证金：1rem 0；
宽度：100%；
显示器：flex；
弯曲方向：立柱；
}
导航ulli：悬停ulli{
宽度：100%；
背景：#d42e；
颜色：白烟；
}
导航ul li:悬停ul li:悬停{
颜色：#D42E；
背景：白烟；
}
nav ul li ul{
显示：无；
}
导航主列表{
文本转换：大写；
字体系列：“Segoe UI”，塔荷马，日内瓦，Verdana，无衬线；
字号：1.2rem；
}
导航社交列表{
证明内容：柔性端；
字体系列：“Courier New”，Courier，monospace；
字号：1rem；
对齐内容：居中对齐；
对齐项目：居中；
}

Git
Photoshop
Github

我认为您看到的问题与填充和边距有关。我对这些做了一些调整，不确定是否有改进

*{
保证金：0；
填充：0；
}
身体{
背景#f3c6；
}
保险商实验室{
列表样式类型：无；
}
a{
文字装饰：无；
颜色：继承；
}
导航{
背景色：#D42E；
高度：2.5雷姆；
宽度：100%；
显示器：flex；
弯曲方向：行；
对齐项目：居中；
证明项目：中心；
证明内容：中心；
颜色：白烟；
}
导航ul{
身高：100%；
宽度：50%；
显示器：flex；
弯曲方向：行；
对齐项目：居中；
保证金：0.2rem；
垂直对齐：中间对齐；
}
李国荣{
身高：100%；
保证金：0；
页边顶部：自动；
填充：0.25雷姆0.5雷姆；
}
nav ul li:悬停{
颜色：#D42E；
背景：白烟；
}
导航ulli：悬停ul{
保证金：0.5雷姆0.25雷姆0；
宽度：100%；
显示器：flex；
弯曲方向：立柱；
}
导航ulli：悬停ulli{
宽度：100%；
背景：#d42e；
颜色：白烟；
}
导航ul li:悬停ul li:悬停{
颜色：#D42E；
背景：白烟；
}
nav ul li ul{
显示：无；
}
导航主列表{
文本转换：大写；
字体系列：“Segoe UI”，塔荷马，日内瓦，Verdana，无衬线；
字号：1.2rem；
}
导航社交列表{
证明内容：柔性端；
字体系列：“Courier New”，Courier，monospace；
字号：1rem；
对齐内容：居中对齐；
对齐项目：居中；
}

Git
Photoshop
Github

这并没有解决问题。它把李放在另一个的下面。哦，对不起，我以为它是一个侧边栏导航。我将相应地进行编辑。我已将

弹性方向：列

添加到

导航

，并将

弹性方向：行

添加到

导航ul

中，但它看起来非常混乱：（是的，子菜单应该是下拉式的，它们按照我想要的方式工作。让我更新样式表。这里是我之前准备的一个：只需将

display:flex；align items:center；

添加到

li

元素。副本中对此进行了解释。