Нижний колонтитул не по центру

Question

У меня проблемы с правильной настройкой навигации в нижнем колонтитуле.Это очень просто, но просто не делает то, что должен.

.main-footer li {
  float: left;
  font-size: 0.85em;
  padding: 0 0.5em;
  margin-bottom: 0.5em;
}

.main-footer {
  text-align: center;
  width: 100%;
  background-color: lightblue;
  padding: 2em;
  margin-top: 30px;
}

<footer class="main-footer">
  <ul>
    <li><a href="#">Contact us</a></li>
    <li>&copy; Copyright Acme Industries 2019</li>
  </ul>
</footer>

Я пытался добавить display: block или display: inline-block в оба селектора CSS, но это не помогло.Есть идеи?

Спасибо, Кейт

Answer 1

Прежде всего.НИКОГДА не используйте float для макета.Он портит ваш контент и запускает эффект снежного кома в вашем CSS.

flex - это путь -> flexbox MDN (и другие ссылки)

Используйте align-items: center, чтобы выровнять ваши элементы по вертикали и justify-content: center, чтобы выровнять их по горизонтали .

Кроме того, используйте box-sizing: border-box, чтобы заполнение нижнего колонтитула было«включено» в ширину 100%, и у вас нет переполнения прокрутки по оси X.

.main-footer li {
  font-size: 0.85em;
  padding: 0 0.5em;
  margin-bottom: 0.5em;
  display: inline-block;
}

.main-footer {
  display: flex;
  align-items:center;
  justify-content: center;
  text-align: center;
  width: 100%;
  background-color: lightblue;
  padding: 2em;
  margin-top: 30px;
  box-sizing:border-box;
}

<footer class="main-footer">
  <ul>
    <li><a href="#">Contact us</a></li>
    <li>&copy; Copyright Acme Industries 2019</li>
  </ul>
</footer>

Answer 2

Попробуйте с flexbox:

.main-footer {
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: lightblue;
    padding: 2em;
    margin-top: 30px;
}

.main-footer li {
    float: left;
    font-size: 0.85em;
    padding: 0 0.5em;
    margin-bottom: 0.5em;
}

<footer class="main-footer">
    <ul>
        <li><a href="#">Contact us</a></li>
        <li>&copy; Copyright Acme Industries 2019</li>
    </ul>
</footer>

Answer 3

С помощью float вы заставляете элементы тянуться влево.Используйте display: inline-block, чтобы сделать элемент в центре, так как родительский объект уже выровнен по тексту: center

.main-footer li {
  display: inline-block;
  font-size: 0.85em;
  padding: 0 0.5em;
  margin-bottom: 0.5em;
  list-style-type:none
}

.main-footer {
  text-align: center;
  width: 100%;
  background-color: lightblue;
  padding: 2em;
  margin-top: 30px;
}

<footer class="main-footer">
  <ul>
    <li><a href="#">Contact us</a></li>
    <li>&copy; Copyright Acme Industries 2019</li>
  </ul>
</footer>

Answer 4

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

Без flexbox установите для элементов li значение display: inline-block.

.

.main-footer {
  width: 100%;
  background-color: lightblue;
  padding: 2em 0;
  margin-top: 30px;
}

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

.main-footer li {
  font-size: 0.85em;
  margin-right: 0.5em;
}

.main-footer li:last-child {
   margin-right: 0;
}

<footer class="main-footer">
  <ul>
    <li><a href="#">Contact us</a></li>
    <li>&copy; Copyright Acme Industries 2019</li>
  </ul>
</footer>

Answer 5

Если вы не хотите идти по гибкому пути, просто измените свойство display вашего элемента UL.

Примерно так:

.main-footer ul {
  display: inline-block;
  margin: 0;
  padding: 0;
}

.main-footer li {
  float: left;
  font-size: 0.85em;
  padding: 0 0.5em;
  list-style-type: none;
}

.main-footer {
  text-align: center;
  width: 100%;
  background-color: lightblue;
  padding: 2em 0;
  margin-top: 30px;
}

<footer class="main-footer">
  <ul>
    <li><a href="#">Contact us</a></li>
    <li>&copy; Copyright Acme Industries 2019</li>
  </ul>
</footer>