Html 如何将a“居中；位置：绝对”；带下拉菜单的topnav

我使用的是来自的纯css菜单。它工作得很好，但如果我试图在菜单不处于“汉堡菜单”模式时居中或右对齐菜单，我就无法让它工作

我尝试了来自的解决方案，但它弄乱了菜单。li元素彼此放置在一起和/或下拉菜单出现在错误的位置

那么，我怎样才能在不弄乱菜单的情况下将菜单居中或右对齐呢？感谢您的帮助

/*去除ul的填充物并列出样式*/
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
位置：绝对位置；
}
/*创建具有间距的水平列表*/
李{
显示：内联块；
浮动：左；
右边距：1px；
}
/*菜单链接的样式*/
李阿{
显示：块；
最小宽度：140px；
高度：50px；
文本对齐：居中；
线高：50px；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
颜色：#fff；
背景:#2f3036；
文字装饰：无；
}
/*顶级链接的悬停状态*/
李：停一停{
背景：19c589；
}
/*下拉链接的样式*/
李：悬停一下{
背景:#f3；
颜色：#2f3036；
高度：40px；
线高：40px；
}
/*下拉链接的悬停状态*/
li:悬停ul a:悬停{
背景：19c589；
颜色：#fff；
}
/*隐藏下拉链接，直到需要它们*/
李乌尔{
显示：无；
}
/*使下拉链接垂直*/
李宇莉{
显示：块；
浮动：无；
}
/*防止文本换行*/
李宇莉{
宽度：自动；
最小宽度：100px；
填充：0 20px；
}
/*悬停时显示下拉列表*/
ul li a:悬停+.隐藏，.隐藏：悬停{
显示：块；
}
/*默认情况下，设置“显示菜单”标签按钮的样式并将其隐藏*/
.显示菜单{
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
文字装饰：无；
颜色：#fff；
背景：19c589；
文本对齐：居中；
填充：10px0；
显示：无；
}
/*隐藏复选框*/
输入[类型=复选框]{
显示：无；
}
/*选中“不可见”复选框时显示菜单*/
输入[类型=复选框]：选中~#菜单{
显示：块；
}
/*反应型风格*/
@媒体屏幕和屏幕（最大宽度：760像素）{
/*使下拉链接内联显示*/
保险商实验室{
位置：静态；
显示：无；
}
/*创建垂直间距*/
李{
边缘底部：1px；
}
/*使所有菜单链接全宽*/
ul li，li a{
宽度：100%；
}
/*显示“显示菜单”链接*/
.显示菜单{
显示：块；
}
}

仅CSS导航菜单
显示菜单

您可以使用flexbox对齐内容：

@media (min-width: 768px) {    
    #menu {
        width: 100%;
        display: flex;
        justify-content: center; /* or use end */
    }
}

您可以使用此代码

正文{
保证金：0；
}
/*去除ul的填充物并列出样式*/
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
位置：绝对位置；
}
/*创建具有间距的水平列表*/
李{
显示：内联块；
浮动：左；
右边距：1px；
}
/*菜单链接的样式*/
李阿{
显示：块；
最小宽度：140px；
高度：50px；
文本对齐：居中；
线高：50px；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
颜色：#fff；
背景:#2f3036；
文字装饰：无；
}
/*顶级链接的悬停状态*/
李：停一停{
背景：19c589；
}
/*下拉链接的样式*/
李：悬停一下{
背景:#f3；
颜色：#2f3036；
高度：40px；
线高：40px；
}
/*下拉链接的悬停状态*/
li:悬停ul a:悬停{
背景：19c589；
颜色：#fff；
}
/*隐藏下拉链接，直到需要它们为止*/
李乌尔{
显示：无；
}
/*使下拉链接垂直*/
李宇莉{
显示：块；
浮动：无；
}
/*防止文本换行*/
李宇莉{
宽度：自动；
最小宽度：100px；
填充：0 20px；
}
/*在悬停时显示下拉列表*/
ul li a：悬停+隐藏，
.隐藏：悬停{
显示：块；
}        
隐藏的{
宽度：20%；
}        
ul.lia{
显示：块；
高度：自动；
文本对齐：居中；
线高：正常；
填充：15px 10px；
}
/*设置“显示菜单”标签按钮的样式，并在默认情况下将其隐藏*/
.显示菜单{
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
文字装饰：无；
颜色：#fff；
背景：19c589；
文本对齐：居中；
填充：10px0；
显示：无；
}
/*隐藏复选框*/
输入[类型=复选框]{
显示：无；
}
/*选中“不可见”复选框时显示菜单*/
输入[类型=复选框]：选中~#菜单{
显示：块；
}
/*响应式风格*/
@媒体屏幕和屏幕（最大宽度：760像素）{
/*使下拉链接内联显示*/
保险商实验室{
位置：静态；
显示：无；