Центрирование панели навигации с помощью HTML / CSS

Question

У меня нет формального обучения HTML и CSS, но веб-разработка - мое хобби, и у меня есть проблема, которую я действительно изо всех сил пытаюсь получить для своего личного веб-сайта. Здесь:

Вы можете видеть, что элементы моего неупорядоченного списка не центрированы на черном фоне неупорядоченного списка; в теге body:

        <ul>
            <li><a href="homepage.html">Home</a></li>
            <li><a href="resume.html">Bio</a></li>
            <li><a href="projects.html">Projects</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li><a href="store.html">Store</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>

Ранее в теге head я объявлял стиль для каждого из этих элементов в документе и что делать, если на него наведен курсор:

    <style>
        ul {
            list-style-type: none;
            background-color: black;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        li {
            float: left;
        }
        li a {
            display: block;
            color: white;
            text-align: center;
            border-width: thick;
            padding: 14px 16px;
            text-decoration: none;
        }
        li a:hover {
            background-color: darkgray;
        }
    </style>

Концепция, которую я пробовал чаще, чем когда-либо, заключается в том, что если у вас есть div тег вокруг li, и вы его центрируете. Но я иду по кругу. Так как же вы центрируете белые буквы, сохраняя одинаковое количество черного пространства с обеих сторон? Большое спасибо!

Для справки, я разветвляюсь из этого урока.

Answer 1

Вы можете использовать flexbox с justify-content: center;

Например

ul {
    list-style-type: none;
    background-color: black;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

Answer 2

По умолчанию ul и li равны display: block;. Для достижения вашего результата вам нужно обернуть ваш список в центрированный div и установить цвет фона на div.

Добавьте обертку к вашему HTML

<div class="wrapper">
    <ul>
        <li><a href="homepage.html">Home</a></li>
        <li><a href="resume.html">Bio</a></li>
        <li><a href="projects.html">Projects</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="store.html">Store</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</div>

Тогда в вашем CSS

.wrapper {
    background-color: black;
    text-align: center;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: inline-block;
}

Answer 3

Добавьте упаковщик div к элементу ul:

<div class="ul-wrapper">
    <ul>
        <li><a href="homepage.html">Home</a></li>
        <li><a href="resume.html">Bio</a></li>
        <li><a href="projects.html">Projects</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="store.html">Store</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
 </div>

И затем установите стили для div следующим образом:

.ul-wrapper {
    text-align: center;
    background-color: black;
}

И добавьте display: inline-block;на стили ul.

ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            display: inline-block;
        }