【问题标题】：how do i align my navbar brand to the center and have my nav links surround it from both sides我如何将我的导航栏品牌与中心对齐并让我的导航链接从两侧围绕它
【发布时间】：2021-10-11 05:01:38
【问题描述】：

我希望我的导航栏品牌位于中间，并且我的导航链接位于我的导航品牌的左侧和右侧。因为当屏幕到达 md 时，我希望导航链接消失并位于汉堡包中，但我的导航品牌仍然显示在顶部中心。

    <nav class="navbar navbar-expand-md bg-dark navbar-dark py-3">
        <div class="container">
            <div class="navbar-brand"><h2>Name</h2></div>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#burger"><span class="navbar-toggler-icon"></span></button>

            <div class="collapse navbar-collapse" id="burger">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item px-5">
                        <a href="#python" class="nav-link" style="color: white;"><h2>Python</h2></a>
                    </li>
                    <li class="nav-item px-5">
                        <a href="#html&css" class="nav-link" style="color: white;"><h2>Html&Css</h2></a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

我想要这个样子 What I want

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

HTML


<h1 class="text-center">Center Navbar Brand logo</h1>


<div class="container">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
              <a class="navbar-brand" href="http://disputebills.com"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTvuVbC_1kQQsg8U63u6gWMWuA7W1Ck5t-zkw&usqp=CAU" alt="logo">
      </a>
      </div>
      

      
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-left">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
    <!--/.container-fluid -->
  </nav>
</div>

CSS

.navbar-brand {
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
}


/* DEMO example styles for logo image */
.navbar-brand {
  padding: 0px;
}
.navbar-brand>img {
  height: 100%;
  width: auto;
  padding: 7px 14px;
}

截图

【讨论】：