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

您只需为navbar设置正确的block即可。目前，Bulma使用Flex Layout。现在清除flex并使其使用.navbar .navbar-brand { text-align: center; display: block; width: 100%; } .navbar .navbar-brand > .navbar-item, .navbar .navbar-brand .navbar-link { display: inline-block; }将使其工作：

{{1}}

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

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

如何使我的Navbar居中？

4 个答案: