Html 如何居中导航栏CSS

我一直在摆弄导航条，我就是不知道如何将它们居中。我目前正在使用这个

我希望可点击框（主页、新闻、联系人、关于我的信息）位于页面中央，而不是左侧。我该怎么做

ul{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；
}
李{
浮动：左；
}
李阿{
显示：块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
li a:悬停：未（.active）{
背景色：#111；
}
.主动{
背景色：#4CAF50；
}

见此 要使

居中，必须删除为

设置的

float:left

属性。相反，您必须使用

显示：内联块

。现在，要使

居中，请为

添加

文本对齐：居中

按如下方式更改CSS

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  text-align:center;
}
li {
  /* float: left; */
    display: inline-block;
}

加

ul{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；
左：30em；
}

尽管我建议使用引导。这使得工作更容易。
答案可能是不要使用列表来制作导航栏，试试下面的代码，它很容易理解：



#试验{
位置：固定；
排名：0；
左：0；
宽度：100%；
背景色：#333；
文本对齐：居中；
填充顶部：10px；
填充底部：13px；
}
a{
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
a:悬停：未（.active）{
背景色：#111；
}
.主动{
背景色：#4CAF50；
}
尝试使用flexbox和
验证内容：中心
：感谢您的帮助！我想试着在某个时候开始使用bootstrap a。我只是想先学点基础知识。谢谢为什么左边有一个
填充：30em？上述CSS如何使其居中？请参阅使用上述CSS的示例。