Html 如何使导航链接居中

尝试将这些导航链接均匀地展开，并使它们位于页面中心。我设法把UL集中在页面中间，但是我不知道如何对链接进行中心化。

我猜这是我需要改变的地方，但不确定是什么

ul{
列表样式类型：无；
保证金：0自动；
填充：0；
溢出：隐藏；
背景色：#333；
宽度：50%；
}
李{
浮动：左；
左侧填充：50px；
}
李阿{
显示：块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
a:悬停{
背景色：红色；
文字装饰：下划线；
}

双栏视图

ul {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  width: 50%;

  /* add display flex */
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
}

li {
  width:50%; /*if you want in one row then 100%/4 = 25% */
  float: center;
  padding-left: 0;
}

奖金： 更改

li a上CSS中的
文本装饰
，以强制其工作

文本装饰：无！重要的
尝试使用flex，您还可以添加其他需要的内容，如列表样式和背景色。
看看这个家庭，它会改变你的生活

ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

您不需要做太多更改，只需删除以下内容：

li {
  float: left;
  padding-left: 50px;
}

使用
grid
可轻松完成此操作。这里有一个

请尝试以下css:


ul{
列表样式类型：无；
保证金：0自动；
填充：0；
溢出：隐藏；
背景色：#333；
宽度：50%；
显示器：flex；
柔性包装：包装；
证明内容：中心；
}
李{
浮动：左；
左侧填充：25px；
右边填充：25px；
}
李阿{
显示：块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
a:悬停{
背景色：红色；
文字装饰：下划线；
}














#导航标签{
文本对齐：居中；
左边距：{适当金额}%；
}
您想要垂直菜单还是水平菜单中的
li
可能位于中心位置您想要所有链接位于一行还是一列中？还是两列？我希望它是水平的，就像现在一样。问题是，链接不在页面的中间。他们在左边。。
ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

<nav id="nav_tag">
   <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Store</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

#nav_tag{
         text-align:center;
         margin-left:{appropriate amount}%;
        }