如何将导航链接居中

Question

尝试将这些导航链接均匀分布并使它们在页面上居中。我设法让 ul 在页面中间居中，但我不确定如何使链接居中。

我猜我需要更改 li 中的某些内容，但不确定是什么..

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

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

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

a:hover {
  background-color: red;
  text-decoration: underline;
}

<nav>
 <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>

Answer 1

两栏视图

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 中的 text-decoration 以强制其工作

text-decoration: none !important;

Answer 2

尝试使用 flex，您还可以添加您想要的其他内容，例如列表样式和背景颜色。看看这个 link 家庭，它会改变你的生活。

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

Answer 3

你不需要改变太多，删除这个即可:

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

Answer 4

使用grid可以轻松做到这一点。这是 fiddle

ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

Answer 5

请尝试以下 css:

ul {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  width: 50%;
  display: flex;
flex-wrap: wrap;
        justify-content: center;
}

li {
  float: left;
  padding-left: 25px;
  padding-right: 25px;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

a:hover {
  background-color: red;
  text-decoration: underline;
}

<nav>
  <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>

Answer 6

<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}%;
        }

如何将导航链接居中

How do I center nav links

html

css

nav