Центрирование навигационных кнопок для моего сайта

Question

    <nav>
        <ul>
            <li><a href="index.php">Home</a></li>
            <li><a href="index.php?about">About</a></li>
            <li><a href="index.php?products">Products</a></li>
            <li><a href="index.php?blog">Blog</a></li>
            <li><a href="index.php?contact">Contact</a></li>
        </ul>
    </nav>

Это список, в котором есть вещи.

nav ul li{
    list-style: none;
    float: left;
}

nav ul li a{
    text-decoration: none;
    display: block;
    float: left;
    padding: 5px 15px;
    color: white;
}

Это те вещи CSS, которые у него есть в настоящее время, и я не могу заставить их центрироваться. Я осмотрелся около часа, но мне почти не повезло с моими текущими навыками в этой области.

Answer 1

Flexbox - это хороший способ заставить вещи идти туда, куда вы хотите.

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

nav li {
  margin: 0 30px;
}

Вы хотите составить линию <li> и сидеть в центре. Сначала вам нужно взять их родителя (<ul>) и сказать ему использовать Flexbox.

Направление изгиба может быть строкой или столбцом. Вы хотите, чтобы они выстроились в ряд.

Как только они выстроятся в очередь, обоснуйте их в центре.

Поле на самом <li> просто не дает им перекрываться.

Answer 2

Использование стиля float: css непосредственно перемещает содержимое в его заданную сторону. Чтобы центрировать элемент, используйте auto set для полей или отступов. margin-left: auto; margin-right: auto; будет центрировать элемент внутри контейнера, имея одинаковое количество полей или отступов с обеих сторон.

более быстрый способ сделать это - margin: y-margins auto; первое значение - это ваши значения margin-top и margin-bottom, второе значение - это ваше левое и правое значения.

для центрирования текста внутри его контейнера, такого как тег <p>, используйте text-align: center;