以菜单为中心的徽标

Question

我正在使用 Bulma CSS 创建一个菜单。我有以下标志：

我想像大西洋一样在页面中心使用它。但是，我不确定如何；我试过margin-auto:0，但没有成功。我还尝试弄乱边距、flexbox 和 inline-block，但无济于事。任何帮助表示赞赏。

这是迄今为止的页面（在 Codepen 上）：https://codepen.io/Refath/full/ZEQzOQX

附加信息：导航栏当前正在使用 Bulma 的组件之一，如下面的 sn-p 中所示：

     <nav class="navbar" role="navigation" aria-label="main navigation">
<form id="demo-2">
    <input type="search" placeholder="Search">
</form>
  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item">
        Math
      </a>

      <a class="navbar-item">
        Science
      </a>
      <a class="navbar-item">
        Politics
      </a>

      <a class="navbar-item">
        Economics
      </a>

      <a class="navbar-item">
        Education
      </a>

      <a class="navbar-item">
        Literature
      </a>

      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">
          More
        </a>

        <div class="navbar-dropdown">
          <a class="navbar-item">
            About
          </a>
          <a class="navbar-item">
            Jobs
          </a>
          <a class="navbar-item">
            Contact
          </a>
          <hr class="navbar-divider">
          <a class="navbar-item">
            Report an issue
          </a>
        </div>
      </div>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <a class="button is-primary">
            <strong>Sign up</strong>
          </a>
        </div>
      </div>
    </div>
  </div>
</nav>

Answer 1

使用margin: 0 auto; 或margin: auto;

它会像这样工作，

margin: auto; 将从所有四个边自动设置边距，如果是

margin: 0 auto;。上下为 0，左右为 auto。