Html 如何在导航栏中将无组织列表居中

因此，我目前正在建设我自己的网站，但遇到了一些麻烦，当涉及到集中我的实际ul在我的导航栏。导航条已经居中，很好，但我试图居中实际的ul，仍然保持左对齐。我正在使用括号文本编辑器。有什么帮助吗

提前感谢，以下是我的CSS代码：

正文{
背景色：#333333；
保证金：100 0；
}
梅因先生{
边框样式：实心；
宽度：80%；
保证金：10美元；
}
.mainimgimg{}
.导航栏{
文本对齐：居中；
宽度：85%；
保证金：0自动；
}
.导航杆{
宽度：100%；
列表样式类型：无；
保证金：0自动；
填充：0自动；
溢出：隐藏；
背景色：#333333；
}
李先生{
浮动：左；
宽度：10%；
}
.导航栏李a{
显示：块；
颜色：白色；
文本对齐：居中；
填充：16px；
文字装饰：无；
}
.导航栏李a：悬停{
背景色：#111111；
}

萨托里

更新以下css部分

.nav-bar li {
 display:inline-flex; /* OR display:inline-block */
 /* float:left; */
/* width: 10%; */
}

正文{
背景色：#333333；
保证金：100 0；
}
梅因先生{
边框样式：实心；
宽度：80%；
保证金：10美元；
}
.mainimgimg{}
.导航栏{
文本对齐：居中；
宽度：85%；
保证金：0自动；
}
.导航杆{
宽度：100%；
列表样式类型：无；
保证金：0自动；
填充：0自动；
溢出：隐藏；
背景色：#333333；
}
李先生{
显示：内联flex；/*或显示：内联块*/
/*浮动：左*/
/*宽度：10%*/
}
.导航栏李a{
显示：块；
颜色：白色；
文本对齐：居中；
填充：16px；
文字装饰：无；
}
.导航栏李a：悬停{
背景色：#111111；
}

更新以下css部分

.nav-bar li {
 display:inline-flex; /* OR display:inline-block */
 /* float:left; */
/* width: 10%; */
}

正文{
背景色：#333333；
保证金：100 0；
}
梅因先生{
边框样式：实心；
宽度：80%；
保证金：10美元；
}
.mainimgimg{}
.导航栏{
文本对齐：居中；
宽度：85%；
保证金：0自动；
}
.导航杆{
宽度：100%；
列表样式类型：无；
保证金：0自动；
填充：0自动；
溢出：隐藏；
背景色：#333333；
}
李先生{
显示：内联flex；/*或显示：内联块*/
/*浮动：左*/
/*宽度：10%*/
}
.导航栏李a{
显示：块；
颜色：白色；
文本对齐：居中；
填充：16px；
文字装饰：无；
}
.导航栏李a：悬停{
背景色：#111111；
}

这是因为浮动：左侧在li上。使其显示：内联块OK将立即试用删除li

width

和

float:left

使用

display:inline块

或

display:inline flex

，这是因为li上的float:left。使其显示：内联块OK将立即试用删除li

width

和

float:left

使用

display:inline块

或

display:inline flex