使用 HTML/CSS 将导航栏居中

编程爱好者

我没有接受过 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并且你将其居中。但是，我在绕圈子。那么如何使白色字体居中，同时在两侧保持等量的黑色空间？非常感谢你！

作为参考，我已经从本教程分支出来。

米特罗

向 ul 元素添加一个 div 包装器：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。