Question

我没有接受过HTML和CSS的正规培训，但是Web开发是我的爱好，而且我有一个问题，就是我很难为自己的个人网站买单。此处：

您可以看到我的无序列表的元素不在黑色无序列表背景的中心。在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标记，并且将其居中，则我尝试过多次。但是，我转圈了。那么，如何在使白色字母居中同时在两侧保持相等的黑色空间的情况下呢？非常感谢你！

作为参考，我从this tutorial.分支出来了

Answer 1

将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;
}

并添加显示：inline-block; ul风格。

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

Answer 2

您可以将flexbox与justify-content: center;

一起使用

例如

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

Answer 3

默认情况下，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;
}

使用HTML / CSS将导航栏居中

3 个答案: