我如何让 Navbar 居中？

Question

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

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

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

我在Codepen上有一个link，方便可视化：

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

注意字体不会显示。

Answer 1

您只需要为navbar设置正确的display。目前，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

不知道是不是这样（可能是我理解错了），不过大家可以补充一下navbard-brand 属性 margin: auto

Answer 3

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

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;
}

所以这个项目占据了剩余的空间。似乎对我有用。

我如何让 Navbar 居中？

How do I center my Navbar?

html

css

bulma