如何使我的Navbar居中？

Question

我之前看过这里，但没有真正奏效。我正在使用Bulma Framework，我认为这是相对闻所未闻的，但我希望你能帮助我将导航栏上的品牌链接集中在一起。这就是我现在所拥有的：

.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

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

Answer 4

好吧，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;
}

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