添加导航栏品牌时保持导航栏菜单居中

Question

我在添加导航栏品牌时无法将菜单项保持在中心位置。 当我在导航栏左侧添加徽标时，菜单项会略微向右移动？ 如何保持居中？ 这是我的导航栏代码（引导程序）：

        <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
          <a class="navbar-brand" href="#"><img class="img-fluid" src="https://psmedia.playstation.com/is/image/psmedia/call-of-duty-warzone-badge-01-ps4-en-27feb20_1583405365530?$HugeHero_Badge$" height="15%" width="15%"></a>
          <ul class="navbar-nav mx-md-auto mt-2 mt-lg-0">
            <li class="nav-item active">
              <a class="nav-link" href="#">WEAPONS <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">LOADOUTS</a>
            </li>
          </ul>
         
          <a href="#" class="button btn-lg btn-info text-center">TEST</a>
        </div>
      </nav>

Answer 1

使用您在此处提供的代码是一种快速解决方法。它可能不是最有条理的解决方案，但它应该可以工作。

你的 Styles.css

/* Set all contents in container to be centered automatically */
#navbarTogglerDemo01 {
  position: absolute;
  top: 0px; left: 0px;
  width: 100vw;
  max-width: 100vw;
  display: block;
  text-align: center; 
}

/* And all direct sub tags display inline block */
.navbar-brand .navbar-nav .button {
  display: inline-block;
}

另一个快速解决方案，但不是 100% 响应：

/* This will move each block slightly back to the left, remember to provide a unit to move left. */
.navbar-brand, .navbar-nav{
  position: relative;
  left: -10px; /* Change this to your custom amount: px % em ... etc */
}

如果这有帮助或您有任何疑问，请告诉我。 祝你好运！！