居中对齐导航栏答案

【问题标题】：Centre Aligning Navigation Bar居中对齐导航栏
【发布时间】：2020-02-21 01:10:27
【问题描述】：

我正在构建在线简历，但似乎无法让我的导航栏居中对齐并使其水平穿过页面。当前垂直位于页面左侧。其次，我怎样才能将 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>

【问题讨论】：

display: flex and float: left to the same elements ?

标签： html css flexbox grid

【解决方案1】：

我发现您的导航栏是基于文本而不是基于图像的。我个人在我当前项目的网页上处理了这个问题。我推荐的是：

不要使用无序列表，而是将所有元素分组到一个 H3 中。这将使我们能够正确对齐您的文本。
给这个 h3 一个类或 ID。（如果你打算在其他地方使用这个导航栏，也许在另一个页面上，使用类。）它可以是你想要的任何东西。对于这个例子，我将使用 navText。
接下来，将以下代码 sn-p 添加到您的 CSS 配置文件中：

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

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

祝你有美好的一天！

【讨论】：

仍然无济于事，我无法将导航栏移到中心。
能否请您分享整个代码，以便我了解事物的布局并尝试复制它？
它不允许我发布整个代码，一直给我错误“看起来您的帖子主要是代码，请添加更多详细信息”。有什么可能的联系方式吗？
是的，有！我的电子邮件是 daddyandwilliam@gmail.com，我的 Discord 是 ProgrammerPlays#8264。

【解决方案2】：

结果

您需要删除所有浮点值并添加 display: flex，请参阅下面的现场演示链接。

CSS

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

现场演示：

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

【讨论】：