时间戳

首页 > 解决方案 > 如何将bulma导航栏中的所有项目水平居中？

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

问题描述

默认情况下，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 链接：https ://jsfiddle.net/q6j9Lyf2/1/

标签： cssflexboxbulma

解决方案

你试过这个：

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

推荐阅读