html - HTML 中的居中列表

Question

我的元素有点问题。我想将其元素显示在一条水平线上的列表居中。我似乎无法弄清楚如何正确地将此列表居中。我这样做是为了使其大小适应视口(viewport)，但我无法将其居中。我尝试了对齐、文本对齐、 float ，甚至位置。

附言对不起，如果我说错了什么，我是 html 的新手

这是我的“风格”代码块:

body {
  margin: 0;
}

div {
  background-color: #130228;
  background: linear-gradient(#120228, #050305);
  padding: 10px;
  text-align: center;
  float: center;
}

ul {
  list-style-type: none;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  display: block;
}

li a {
  background-color: transparent;
  border-bottom: 3px solid #e1131d;
  background: linear-gradient(transparent 70%, #ed4255);
  border-radius: 14px;
  color: #133954;
  font-size: 150%;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  padding: 0.4% 1.4%;
  margin-left: 2%;
  margin-top: 0;
  cursor: pointer;
  float: left;
  text-decoration: none;
  font-family: 'Jockey One';
  text-selected: none;
  font-weight: 700;
}

.active {
  margin: bottom;
  border-bottom: 3px solid #468902;
  background: linear-gradient(transparent 60%, #68da23);
  background-size: 10%;
  border-radius: 14px;
  cursor: pointer;
  width: auto;
  height: auto;
}

li a:hover {
  margin: bottom;
  border-bottom: 3px solid #275ea3;
  background: linear-gradient(transparent 70%, #9ecfe7);
  background-size: 10%;
  border-radius: 14px;
  cursor: pointer;
  width: auto;
  height: auto;
}

<div>
  <ul>
    <li><a class="no-select gradient" href="../index.html">Acasă</a></li>
    <li><a class="no-select gradient active">Universul Observabil</a></li>
    <li><a class="no-select gradient" href="planets.html">Planete</a></li>
    <li><a class="no-select gradient" href="stars.html">Stele</a></li>
    <li><a class="no-select gradient" href="galaxies.html">Galaxii</a></li>
    <li><a class="no-select gradient" href="astrology.html">Istoria Astrologiei</a></li>
    <li><a class="no-select gradient" href="contact.html">Contact</a></li>
  </ul>
</div>

Answer 1

尝试将 li 设置为 display: inline-block 并将 ul 设置为 text-align: center; 然后将 li a 上的所有边距和填充移动到 li。

像这样:

body {
  margin: 0;
}

div {
  background-color: #130228;
  background: linear-gradient(#120228, #050305);
  padding: 10px;
  text-align: center;
  float: center;
}

ul {
  list-style-type: none;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  display: block;
  text-align: center;
}

li {
  display: inline-block;
  padding: 0.4% 1.4%;
  margin-left: 2%;
  margin-top: 0;
}

li a {
  background-color: transparent;
  border-bottom: 3px solid #e1131d;
  background: linear-gradient(transparent 70%, #ed4255);
  border-radius: 14px;
  color: #133954;
  font-size: 150%;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  cursor: pointer;
  float: left;
  text-decoration: none;
  font-family: 'Jockey One';
  text-selected: none;
  font-weight: 700;
}

.active {
  margin: bottom;
  border-bottom: 3px solid #468902;
  background: linear-gradient(transparent 60%, #68da23);
  background-size: 10%;
  border-radius: 14px;
  cursor: pointer;
  width: auto;
  height: auto;
}

li a:hover {
  margin: bottom;
  border-bottom: 3px solid #275ea3;
  background: linear-gradient(transparent 70%, #9ecfe7);
  background-size: 10%;
  border-radius: 14px;
  cursor: pointer;
  width: auto;
  height: auto;
}

<div>
  <ul>
    <li><a class="no-select gradient" href="../index.html">Acasă</a></li>
    <li><a class="no-select gradient active">Universul Observabil</a></li>
    <li><a class="no-select gradient" href="planets.html">Planete</a></li>
    <li><a class="no-select gradient" href="stars.html">Stele</a></li>
    <li><a class="no-select gradient" href="galaxies.html">Galaxii</a></li>
    <li><a class="no-select gradient" href="astrology.html">Istoria Astrologiei</a></li>
    <li><a class="no-select gradient" href="contact.html">Contact</a></li>
  </ul>
</div>