与导航栏引导程序重叠的中央徽标

Question

嗨，我想让我的导航栏看起来像这样：

但我似乎无法弄清楚如何将图像置于导航栏的顶部。我正在使用 bootsrap 5。我还没有向导航栏添加任何 css，但是否有一些属性可以用来将它放在前面。谢谢，这是html：

<header>
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <div class="container-fluid">

      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav me-auto mb-2 mb-md-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">HOME</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">ABOUT</a>
          </li>
          <a class="navbar-brand" href="#"><img src="/images/logos/circle-cropped.png" alt=""></a>
          <!-- <a href="#"><img src="/images/logos/circle-cropped.png"></a> -->
        </ul>
      </div>
    </div>
  </nav>
</header>

Answer 1

WORKING DEMO HERE

这个 CSS 应该有帮助：

.navbar-brand {
  flex: 0 1 auto;
  display: block;
  width: 100px;
  height: 100px; 
  position: absolute;
  left: 50%;
  top: 0;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%);
  text-align: center;
}

.navbar-brand img {
  max-height: 100%;
  max-width: 100%;
}