Css 内联li中的垂直对齐文本

我正在尝试创建一个自动调整的水平菜单，并希望在显示为内联的

li

中垂直对齐文本。当前，文本被粘贴到顶部。我所有的尝试都失败了。请参阅下面的标记

#导航
{
显示：内联表；
填充：0；
边缘顶端：10em；
边缘底部：10em；
}
#导航>李
{
显示：内联；
浮动：左；
高度：8em；
宽度：8em；
填充：0px 5px；
字号：1.5em；
颜色：#0a547c；
}
#导航>李：悬停
{
背景颜色：蓝色；
光标：指针；
}

文本A
文本B

垂直对齐

在这种情况下应该对您有所帮助，而float会破坏这种行为

#导航
{
显示：表格；
填充：0；
边缘顶端：10em；
边缘底部：10em；
}
#导航>李
{
显示：表格单元格；
垂直对齐：中间对齐；
高度：8em；
宽度：8em；
填充：0px 5px；
字号：1.5em；
颜色：#0a547c；
}
#导航>李：悬停
{
背景颜色：蓝色；
光标：指针；
}

文本A
文本B

使用

浮动

，我认为您应该将

显示：内联：

更改为

显示：弹性：

，并使用

对齐项目：居中将它们垂直地放在中间。它们使用
span
环绕文本，以便您可以更轻松地控制文本样式


#导航
{
显示：内联表；
填充：0；
边际上限：0；
边缘底部：10em；
}
#导航>李
{
显示器：flex；
对齐项目：居中；
浮动：左；
高度：8em；
宽度：8em；
填充：0px 5px；
字号：1.5em；
颜色：#0a547c；
文本对齐：居中；
}
#导航>李>跨度{
垂直对齐：中间对齐；
显示：块；
宽度：100%；
}
#导航>李：悬停
{
背景颜色：蓝色；
光标：指针；
}


文本A
文本B