如何在导航栏切换器 (Bootstrap 5) 中将图标居中？

Question

我在 Angular 中使用 bootstrap 创建了一个导航栏，但是我在添加用户图标时遇到了一个问题，如下图所示，如果我改用如下所示的文本（我的帐户）。我该如何解决这个问题并确保用户图标像导航栏中的其他链接一样居中对齐？

<nav class="navbar navbar-light navbar-expand-md bg-faded justify-content-center navbar-light bg-light">
  <div class="container">
      <a href="/" class="navbar-brand d-flex w-50 me-auto">

        <img
        src="assets/images/myImage.png"
        alt="my-image"
        loading="lazy" 
        class="logo"
      />

      </a>

      
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsingNavbar3">
          <span class="navbar-toggler-icon"></span>
      </button>

      <div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
          <ul class="navbar-nav w-100 justify-content-center">
              <li class="nav-item active">
                  <a class="nav-link" href="#">Home</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#">Link</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#">Link</a>
              </li>

              <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
              </li>

          </ul>

          
          <ul class="nav navbar-nav ms-auto w-100 justify-content-end">
          <!--    <li class="nav-item">
                  <a class="nav-link" href="#">Right</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#">Right</a>
              </li>
            
               -->
              <li class="nav-item dropdown">
                  <a class="nav-link" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                       
                    <img
                    src="assets/images/user.png"
                    alt="user-logo"
                    loading="lazy" 
                    class="logo"
                  />

                    </a>
                  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarScrollingDropdown">
                      <li><a class="dropdown-item" href="#">Login</a></li>
                      <li><a class="dropdown-item" href="#">Sign Up</a></li>
                    <!--  <li>
                          <hr class="dropdown-divider">
                      </li>
                      <li><a class="dropdown-item" href="#">Item</a></li>

                      --> 
                  </ul>
              </li>
          </ul>
      </div>
  </div>
</nav>

Answer 1

您可以使用 <center> 标签来执行此操作，但我建议您改用 CSS。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-light navbar-expand-md bg-faded justify-content-center navbar-light bg-light">
  <div class="container">
      <a href="/" class="navbar-brand d-flex w-50 me-auto">

        <img
        src="https://i-need-to-go.to-sleep.xyz/r/hi.png"
        alt="my-image"
        loading="lazy" 
        class="logo"
      />

      </a>

      
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsingNavbar3">
          <span class="navbar-toggler-icon"></span>
      </button>

      <div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
          <ul class="navbar-nav w-100 justify-content-center">
              <li class="nav-item active">
                  <a class="nav-link" href="#">Home</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#">Link</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#">Link</a>
              </li>

              <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
              </li>

          </ul>

          
          <ul class="nav navbar-nav ms-auto w-100 justify-content-end">
          <!--    <li class="nav-item">
                  <a class="nav-link" href="#">Right</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#">Right</a>
              </li>
            
               -->
              <li class="nav-item dropdown">
                  <a class="nav-link" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                       
                    <div style="text-align: center;"><img
                    src="https://i-need-to-go.to-sleep.xyz/r/hi.png"
                    alt="user-logo"
                    loading="lazy" 
                    class="logo"
                    
                    style="border: 1px solid lime; /*remove*/"
                  /></div>

                    </a>
                  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarScrollingDropdown">
                      <li><a class="dropdown-item" href="#">Login</a></li>
                      <li><a class="dropdown-item" href="#">Sign Up</a></li>
                    <!--  <li>
                          <hr class="dropdown-divider">
                      </li>
                      <li><a class="dropdown-item" href="#">Item</a></li>

                      --> 
                  </ul>
              </li>
          </ul>
      </div>
  </div>
</nav>

The center tag has been deprecated, and is not supported by some browsers, so you should probably use the CSS option above instead of <center>.

你也可以删除那个绿色边框，我只是把它放在那里以表明它实际上居中。

Answer 2

给你...

@ethry 建议的解决方案不是最好的解决方案（即使有效）。如果这可以用 Bootstrap 完成，为什么要使用 CSS？您只需将 d-flex justify-content-center 添加到 nav-item.

请参阅下面的代码段。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<nav class="navbar navbar-light navbar-expand-md bg-faded justify-content-center navbar-light bg-light">
  <div class="container">
    <a href="/" class="navbar-brand d-flex w-50 me-auto">
      <img src="assets/images/myImage.png" alt="my-image" loading="lazy" class="logo" />
    </a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsingNavbar3">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
      <ul class="navbar-nav w-100 justify-content-center">
        <li class="nav-item active d-flex justify-content-center">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item d-flex justify-content-center">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item d-flex justify-content-center">
          <a class="nav-link" href="#">Link</a>
        </li>

        <li class="nav-item d-flex justify-content-center">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>

      <ul class="nav navbar-nav ms-auto w-100 justify-content-end">
        <!--  <li class="nav-item">
                  <a class="nav-link" href="#">Right</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#">Right</a>
              </li>
         -->
        <li class="nav-item dropdown d-flex justify-content-center">
          <a class="nav-link" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            <img src="assets/images/user.png" alt="user-logo" loading="lazy" class="logo" />
          </a>
          <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarScrollingDropdown">
            <li><a class="dropdown-item" href="#">Login</a></li>
            <li><a class="dropdown-item" href="#">Sign Up</a></li>
            <!--  <li>
                      <hr class="dropdown-divider">
                  </li>
                  <li>
                      <a class="dropdown-item" href="#">Item</a>
                  </li>
            -->
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

如何在导航栏切换器 (Bootstrap 5) 中将图标居中？

How can I center an Icon in the navbar-toggler (Bootstrap 5)?

css

bootstrap-5