Html 即使屏幕发生变化，仍保持菜单中的文本居中

这肯定是以前问过的，我道歉。但这些解决方案似乎对我不起作用。尽管分辨率发生了变化，但我仍试图使菜单文本居中。我还有一个“家”的形象。这就是它不起作用的原因吗？将其插入菜单栏的最佳方式是什么

#菜单栏{
宽度：100%；
保证金：0px 0px 0px 0px；
填充：0px 6px 0px 6px；
高度：35px；
左：0px；
顶部：0px；
背景色：rgba（0,0,0,0.7）；
z指数：998；
位置：固定；
}
.imghome{位置：相对；顶部：-3px；}
#菜单栏里{
填充：10px 25px 0px 6px；
浮动：左；
位置：相对位置；
列表样式：无；
}
#菜单栏a{
字体大小：正常；
字体系列：verdana；
字体风格：普通；
字体大小：12px；
颜色：#D6；
文字装饰：无；
显示：块；
左边距：70像素；
}

在css中使用Flexbox将有助于对齐文本，并根据屏幕大小自动调整文本

尝试添加：

display: flex;
justify-content: center;
align-items: center;

到#主栏。 我还会对填充物进行一些调整，使其看起来更好：

#菜单栏{
宽度：100%；
保证金：0px 0px 0px 0px；
填充：0px 6px 0px 6px；
高度：50px；
左：0px；
顶部：0px；
背景色：rgba（0,0,0,0.7）；
z指数：998；
位置：固定；
显示器：flex；
弯曲方向：行；
证明内容：中心；
对齐项目：居中；
}
.imghome{位置：相对；顶部：-3px；}
#菜单栏里{
填充：10px 15px；
列表样式：无；
}
#菜单栏a{
字体大小：正常；
字体系列：verdana；
字体风格：普通；
字体大小：12px；
颜色：#D6；
文字装饰：无；
显示：块；
}

我做的第一件事是删除img标签中的附加引号

正如你提到的，我希望它能够适应屏幕大小，我去掉了背景的固定高度，这样它就能在较小的屏幕上正确地改变高度

然后我将它们从列表中删除，以便文本可以正确居中，并将它们从：

display:block

更改为

display:inline block

，这样它将动态更改，最后我添加了

text align:center因此无论屏幕大小，它都会自动居中

请参阅
谢谢。将它们转换为div的原因是什么？只需一个div，就可以包含文本并为其提供所需的背景。链接本身仍然只是链接链。在代码段中它看起来很棒，但是当我把它放到整个代码中时，“菜单类别”是垂直列出的，而不是水平列出的。显示：flex；默认情况下，应水平排列项目。可能父容器中有一个css强制它垂直（我猜是因为我不知道整个代码是什么样子。请尝试在display:flex；之后将flex direction:row；添加到#菜单栏中。我已更新了答案以反映此更改。