Центрирование списка в HTML

Question

У меня небольшая проблема с моим проектом. Я хочу центрировать список, чьи элементы отображаются горизонтальной линией. Я не могу понять, как правильно центрировать этот список. Я сделал так, чтобы его размер соответствовал области просмотра, но я не могу отцентрировать его. Я пробовал выравнивать, выравнивать текст, плавать и даже позиционировать.

P.S. Извините, если я сказал что-то не так, я немного новичок в html

Это мой кодовый блок 'style':

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

Я верю, что это то, что вы ищете. Самый лучший способ, которым я люблю центрировать большинство вещей, - это отображение: сетка и размещение элементов: центр;

Вы можете сделать это также.

ul {
   display: grid; // creates a grid
   place-items: center; // centers content combining align-items and justify-items
   grid-template-columns: repeat(7, 1fr); // this is saying grid make me 7 columns all columns having the width of the container or screen

}

Узнайте больше о сетках на MDN .

Сетка также поддерживается во всех браузерах. ( Поддержка сетки )

Answer 2

Попробуйте установить 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>

Answer 3

Похоже, что некоторые из введенных здесь дополнительных стилей приводят к неожиданным результатам при попытке центрировать элементы списка.

При использовании подхода flexbox в конечном итоге игнорируются поля и отступы, добавленные к элементам привязки.Я думаю, что было бы лучше, если бы вы начали с простого макета флексбокса, а затем добавили ваш дополнительный стиль после факта.

Вот простой макет flexbox с вашим HTML:

    body {
      margin: 0;
    }

    div {
      background-color: black;
      padding: 5px;
    }

    ul {
      list-style: none;
      display: flex;
      justify-content: center;
    }

    li {
      padding: 5px 10px;
      margin: 0 5px;
      background-color: lightgray;
    }

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