html - 如何使导航栏居中？

Question

我以前看过这里，但没有任何效果。我正在使用我认为相对闻所未闻的 Bulma 框架，但我希望你能帮助我将品牌链接集中在导航栏上。这就是我现在拥有的：

.navbar {
  background-color: #0a0a0a;
  color: white;
  height: 9%;
}

.navbar .navbar-brand > .navbar-item,
.navbar .navbar-brand .navbar-link {
  color: white;
  font-family: 'Wavehaus';
}

我在 Codepen 上有一个链接，以便将其可视化：

https://codepen.io/anon/pen/BwrWwg

请注意，字体不会显示。

Answer 1

您只需要display为navbar. 目前，Bulma 使用 Flex Layout。现在清除 flex 并使其使用block将使其工作：

.navbar .navbar-brand {
  text-align: center;
  display: block;
  width: 100%;
}

.navbar .navbar-brand > .navbar-item,
.navbar .navbar-brand .navbar-link {
  display: inline-block;
}

Answer 2

.navbar {
  background-color: #0a0a0a;
  color: white;
  height: 9%;
  display:flex;
  justify-content:center;
}

Answer 3

嗯，Bulma正在使用 flex。navbar如果要保留徽标，可以尝试在徽标后添加另一个项目

< a class="navbar-item center">Table of Content</a>

然后您可以将flex此项（仅此项）的属性更改为

.navbar-item.center {
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
}

这样这个项目就占据了其余的空间。似乎为我工作。

Answer 4

我不知道是不是这样（也许我理解错了），但你可以添加到navbard-brand属性margin: auto