Html 如何使用链接和下拉项将导航栏居中？

我正在尝试找出如何将包含链接和下拉项的导航栏居中。我可以让链接自己居中，下拉项自己居中，但当试图让它们一起居中时，它们会水平居中，而不是垂直居中。现在看起来像这样。当我将float更改为none（并按照建议添加flex）时，我得到了这个

.navbar{
溢出：隐藏；
}
纳瓦尔先生{
浮动：左；
填充：14px 16px；
背景色：#666666；
}
.下拉列表{
浮动：左；
溢出：隐藏；
}
.下拉菜单{
填充：14px 16px；
保证金：0；
}
.下拉内容{
显示：无；
位置：绝对位置；
最小宽度：160px；
z指数：1；
}
.下拉内容a{
浮动：无；
填充：12px 16px；
显示：块；
文本对齐：左对齐；
}
.下拉：悬停.下拉内容{
显示：块；
}

B
C

您可以使用flex来解决这个问题

.navbar{
溢出：隐藏；
显示器：flex；
证明内容：中心；
}
纳瓦尔先生{
浮动：左；
填充：14px 16px；
背景色：#666666；
}
.下拉列表{
浮动：左；
溢出：隐藏；
}
.下拉菜单{
填充：14px 16px；
保证金：0；
}
.下拉内容{
显示：无；
位置：绝对位置；
最小宽度：160px；
z指数：1；
}
.下拉内容a{
浮动：无；
填充：12px 16px；
显示：块；
文本对齐：左对齐；
}
.下拉：悬停.下拉内容{
显示：块；
}

B
C

你可以添加一个屏幕截图，说明你看到了什么以及你想完成什么吗？我看到它们垂直居中。