如何在引导程序中居中导航栏项目（mx-auto 不起作用）答案

【问题标题】：How do I center navbar items in bootstrap (mx-auto doesn't work)如何在引导程序中居中导航栏项目（mx-auto 不起作用）
【发布时间】：2022-02-08 08:35:02
【问题描述】：

  <nav class="navbar navbar-expand-sm navbar-light">
    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarNav"
      aria-controls="navbarNav"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav mx-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">
            Home
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            About
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            products
          </a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="#">
            gallery
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            order
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            contact
          </a>
        </li>
      </ul>
    </div>
  </nav>

我无法将导航项居中。即使我放了 mx-auto，它也会向右对齐。我尝试了 margin-left 但它不会响应。它只会将 navbar-nav 居中，但不会将其中的项目居中。我将如何解决这个问题？谢谢

【问题讨论】：

代码结构没有错误，是哪个版本的bootstrap版本？
我使用了您的代码，导航栏位于中心。请分享更多您的代码
对不起，我有 .nav-item { margin: 30px 10%; } 在 css 中，所以当它们有边距时它看起来像右对齐

标签： html css bootstrap-4 react-bootstrap

【解决方案1】：

你可以这些课程，

text-center 或 container-fluid 或使用弹性框 flex justify-center

【讨论】：

【解决方案2】：

您可以使用“display: flex”和“justify-content: center”这可能会帮助您解决这个问题。如果要对齐文本，可以使用“text-align:center”。

【讨论】：