居中对齐导航栏

Question

我正在建立一个在线简历，似乎无法使导航栏居中对齐并使它在页面上水平放置。当前垂直坐在页面左侧。 其次，如何将弹性框或网格布局应用于导航栏？

#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。 （如果您打算在其他地方使用此导航栏，则可能在其他页面上使用class。）它可以是您想要的任何内容。对于此示例，我将使用navText。

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

   .navText { 文本对齐：居中； }

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

祝你有美好的一天！

Answer 2

结果

---

您需要删除所有浮点值，然后添加display：flex，请参见下面的实时演示链接。

CSS

.nav {
  display: flex;
  justify-content: center;
}

实时演示：

https://codepen.io/wilsonbalderrama/pen/MWYpBmw