Html 如何使导航栏居中；按钮；？

我正在做一个有趣的网站，并希望我的导航栏中心，但似乎没有任何工作。我想导航栏满了整个宽度，但在中间有“按钮”。同时，出于响应性，我已经尝试添加css（navbar li）：左边距：50%。但这不是我想要的，左边距：自动和右边距：自动也不起作用。我尝试使用display:inline块和text align:center；但它不起作用。你有什么建议吗

.navbar{
位置：相对位置；
利润上限：-47px；
}
纳瓦尔先生{
宽度：99%；
列表样式类型：无；
保证金：自动；
填充：0；
溢出：隐藏；
背景色：rgba（0,0,0,0.5）；
}
navbar li{}
李娜先生{
浮动：左；
颜色：白色；
填充：14px 16px；
文字装饰：无；
}
李娜：停下来{
背景色：rgba（0,0,0,0.8）；
}
.下拉内容{
显示：无；
位置：绝对位置；
边缘顶部：47px；
背景色：rgba（0,0,0,0.8）；
文本对齐：居中；
最小宽度：120px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉：悬停.下拉内容{
显示：块；
}
.主动{
背景色：rgba（0,0,0,0.8）；
颜色：白色；
}

您是否尝试过设置

显示：flex在您的
上？然后您应该能够添加
justify content:center
您是否尝试过设置
显示：flex在您的
上？然后您应该能够添加
justify content:center
通过设置
文本对齐：居中.navbar ul
和
显示器上显示code>：内联块在
.navbar ul
上，如下所示：

.navbar ul {
     width: 99%;
     list-style-type: none;
     margin: auto;
     padding: 0;
     overflow: hidden;
     background-color: rgba(0,0,0,0.5);
     text-align: center;
 }

 .navbar li {
     display: inline-block;
 }

通过设置
文本对齐：居中.navbar ul
和
显示器上显示code>：内联块在
.navbar ul
上，如下所示：

.navbar ul {
     width: 99%;
     list-style-type: none;
     margin: auto;
     padding: 0;
     overflow: hidden;
     background-color: rgba(0,0,0,0.5);
     text-align: center;
 }

 .navbar li {
     display: inline-block;
 }

你好，谢谢你的帮助！它成功了，导航栏现在位于中心。但通过添加显示，出现了另一个问题：inline块；行中，有一个新的边距或填充（不知道是哪个或在哪里），现在按钮周围有一个很小的空间。因此，当鼠标悬停时，按钮变为黑色，但周围仍有一小部分未改变颜色的空间关于
.navbar ul
你好，谢谢你的帮助！它成功了，导航栏现在位于中心。但通过添加显示，出现了另一个问题：inline块；行中，有一个新的边距或填充（不知道是哪个或在哪里），现在按钮周围有一个很小的空间。因此，当鼠标悬停时，按钮变为黑色，但周围仍有一小部分未改变颜色的空间打开
.navbar ul