Bootstrap导航栏菜单项居中及logo垂直对齐调整问题

核心修改点 #

• 移除导航菜单列表上的ml-auto类（该类强制菜单右对齐，会抵消居中效果）
• 给菜单折叠容器#navbarSupportedContent添加justify-content-center类，实现三个菜单项水平居中
• 给logo外层容器.nameLogo添加d-flex align-items-center类，实现logo区域垂直居中

修改后完整代码 #

<nav class="navbar navbar-expand-lg py-5 navbar-dark shadow-sm" style="background-color: #264653;width:100%;" >
  <div class="container">
    <!-- 新增d-flex align-items-center实现logo垂直居中 -->
    <div class="nameLogo d-flex align-items-center">
      <span class="navbar-brand" style="display:flex;">
        <img src="~/Images/InfoOrange.png" alt="ACR" width="70" height="70" class="d-inline-block align-middle mr-2" runat="server" />
        <span style="font-size:25px;color:white;"><span style="color:#e9c46a">City of Test</span><br />COMPANY OF TEST</span>
      </span>
    </div>
    <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"><span class="navbar-toggler-icon"></span></button>

    <!-- 新增justify-content-center实现菜单居中 -->
    <div id="navbarSupportedContent" class="collapse navbar-collapse justify-content-center">
      <div>
        <!-- 移除了原来的ml-auto类 -->
        <ul class="navbar-nav">
          <%-- <li class="nav-item active"><a href="#" class="nav-link">Home <span class="sr-only">(current)</span></a></li>--%>
          <li class="nav-item dropdown nav-item active">
            <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Users
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Details</a>
              <a class="dropdown-item" href="Depatment.aspx">Department</a>
              <%-- <a class="dropdown-item" href="#">Sections</a>--%>
            </div>
          </li>
          <li>&nbsp;</li>
          <li class="nav-item dropdown nav-item active">
            <a class="nav-link dropdown-toggle" href="#" id="admindropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Admin
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="NewBoxFolder.aspx">Box/Folder</a>
              <a class="dropdown-item" href="#">Configuration</a>
            </div>
          </li>
          <li>&nbsp;</li>
          <li class="nav-item dropdown nav-item active">
            <a class="nav-link dropdown-toggle" href="#" id="recordsDropDown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Records
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="FileUpload.aspx">BlockChain Upload</a>
              <a class="dropdown-item" href="#">Verify</a>
              <a class="dropdown-item" href="DocReport.aspx">Report</a>
              <a class="dropdown-item" href="BucketList.aspx">S3 List</a>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="sign">
      <ul>
        <li class="nav-item" style="margin-right:5px" >
          <a class="nav-link px-5" href="<%= ResolveUrl("~/Pages/SignOut.aspx") %>">Sign Out</a>
        </li>
      </ul>
    </div>

    <div class="welcome">
      <ul>
        <li class="nav-item" style="margin-right:5px" >
          Welcome  <%=userName %>
        </li>
      </ul>
    </div>
  </div>
</nav>

补充说明 #

如果调整后小屏折叠状态下菜单对齐不符合预期，可以额外加媒体查询调整移动端的菜单对齐规则，以上代码默认适配桌面端展示需求。

内容的提问来源于stack exchange，提问作者rimi