html - 中心对齐导航栏

Question

我正在制作一份在线简历，但似乎无法让我的导航栏居中对齐并使其水平穿过页面。当前垂直位于页面左侧。其次，我如何才能将 flexbox 或网格布局应用于我的导航栏？

#toolbar h3 {
    font-weight: bolder;
    font-style: italic;
    font-family: Baskerville;
    border: black;
    border-bottom-width: 100px;
    display: inline-flex;
    flex-direction: row;
    font-size: xx-large;
    text-transform: capitalize;
}

.nav{
    border:5px solid black;
    margin:0;
    padding:0;
    list-style-type: none;
   display: inline-block;
    flex-direction: column;
    color: black;
}


.nav li{
   display:flex;
    color: black;
    float: left;
}

.nav a{
    display:inline-block;
    padding:10px;
}

#toolbar{
    background-color: silver;
    overflow: hidden;
}
#toolbar a:hover {
    background-color: red;
    color: black;

}

<div id="toolbar">
    <p>
    <ul class="nav">
    <li><a href="#startAbout"><h3> About Me</h3></a></li>
    <li><a href="#startAcademic"><h3> Academic Profile</h3></a></li>
    <li><a href="#startExperience"><h3> Past Experience</h3></a></li>
</ul>
    </p>
</div> 

Answer 1

我看到您的导航栏是基于文本的，而不是基于图像的。我亲自在我当前元素的网页上处理了这个问题。我会推荐的是:

1. 不要使用无序列表，而是将所有元素组合到一个 H3 中。这将使我们能够正确对齐您的文本。

2. 为这个 h3 指定一个类或 ID。 (如果你打算在其他地方使用这个导航栏，也许在另一个页面上，使用类。)它可以是你想要的任何东西。对于此示例，我将使用 navText。

3. 接下来，将以下代码片段添加到您的 CSS 配置文件中:

   .navText {文本对齐:居中；

这应该可以解决问题!如果没有，请尝试使用 align CSS 元素并将其设置为居中。

祝你有美好的一天!