如何水平居中 bulma 导航栏中的所有项目？

Question

默认情况下，bulma css 框架左对齐导航栏中的所有项目。不过这对于大显示器来说很不方便。

具有此 html 布局（根据 bulma 的文档）：

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>

<body>
  <div class="navigation">
    <nav class="navbar" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <a class="navbar-item" href="http://localhost:8000">
          <img src="https://bulma.io/images/bulma-logo.png" width="50">
        </a>
        <a class="navbar-item" href="http://localhost:8000">Sitename</a>
        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navMenu">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>
      <div class="navbar-menu" id="navMenu">
        <div class="navbar-start">
          <a class="navbar-item" href="/link1.html">link 1</a>
          <a class="navbar-item" href="/link2.html">link 2</a>
          <a class="navbar-item" href="/link3.html">link 3</a>
          <a class="navbar-item" href="/link4.hmlt">link 4</a>
        </div>
      </div>
    </nav>
  </div>
</body>

产生：

预期输出：

添加额外的 css:

.navbar {
  align-content: center;
  justify-content: center;
}

好像还不够

Jsfiddle link: https://jsfiddle.net/q6j9Lyf2/1/

Answer 1

你试过这个吗：

.navbar{
    display:flex;
    align-items:center;
}

Answer 2

除非您添加 display: flex

，否则您在 .navbar class 中编写的样式将不适用

.navbar {
  display: flex
  align-content: center;
  justify-content: center;
}

你还必须添加

.navbar-menu {
    flex-grow: initial!important;
    flex-shrink: initial!important;
}

不喜欢用!important这样写

.navbar .navbar-menu {
    flex-grow: initial;
    flex-shrink: initial;
}

如何水平居中 bulma 导航栏中的所有项目？

How to horizontally center all items in bulma navbar?

css

flexbox

bulma