具有不均匀垂直元素的引导导航栏

Question

https://codepen.io/bencasalino/pen/NWPLLYQ

<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto nav-flex-icons">
      <li class="nav-item">
        <a class="nav-link p-0 color-white" href="#"> 
          Logout |
          </a>
      </li>
      <li class="nav-item">
        <a class="nav-link p-0 color-white" href="#"> 
          Logged in as: 
          <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" class="rounded-circle z-depth-0"
            alt="avatar image" height="35">
        </a>
      </li>
    </ul>
  </div>

在导航栏的右侧，我有两个具有相同类但未垂直对齐的元素。如果他们具有相同的样式和标签类型，我正在为为什么他们会这样做而苦苦挣扎。

专门查看 Logout 和 Logged in as text。添加了 Codepen 以供参考。

Answer 1

只需在我们占据 li 可用的完整高度的地方添加这个 CSS，然后对齐 <a>：

.navbar-collapse ul li a{
    display: flex;
    height: 100%;
    align-items: center;
    }

工作 sn-p 如下：

/* Default Styles */

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


/* Navbar Styles */

.navbar {
  background: rgb(0, 101, 163);
  background: linear-gradient(180deg, rgba(0, 101, 163, 1) 0%, rgba(9, 167, 229, 1) 100%);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
}

.cta-logout {
  color: #ffffff;
  border: 1px solid white;
  /* background-color: white; */
}

.cta-logout:hover {
  color: #ffffff;
  border: 1px solid white;
  background-color: white;
}


/* ZAPP Color Style Guide Presets */


/* Black */

.color-black {
  color: #444444;
}


/* White */

.color-white {
  color: #ffffff;
}


/* Grey-1 */

.color-grey-1 {
  color: #A6ADB4;
}


/* Grey-2 */

.color-grey-2 {
  color: #BBBDC0;
}


/* Blue-1 */

.color-blue-1 {
  color: #BBBDC0;
}


/* Blue-2 */

.color-blue-2 {
  color: #305C89;
}


/* Blue-3 */

.color-blue-3 {
  color: #004976;
}


/* Blue-4 */

.color-blue-4 {
  color: #27A9DE;
}


/* Blue-5 */

.color-blue-4 {
  color: #80A4BA;
}


/* Orange */

.color-orange {
  color: #EE7411;
}


/* Yellow */

.color-yellow {
  color: #F7AD41;
}


/* Lime */

.color-lime {
  color: #8AC340;
}


/* Green-Success */

.color-green {
  color: #148137;
}


/* Red-Error */

.color-red {
  color: #E92228;
}

.navbar-collapse ul li a {
  display: flex;
  height: 100%;
  align-items: center;
}

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/base.css">

<!--Navbar -->
<nav class="mb-1 navbar navbar-expand-lg">
  <form class="form-inline">
    <img src="/images/zapp-logo-white.png" width="100" height="50" class="d-inline-block " alt="">
    <img src="/images/zapp-onsite-logo.png" width="60" height="50" class="d-inline-block " alt="">
  </form>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto nav-flex-icons">
      <li class="nav-item">
        <a class="nav-link p-0 color-white" href="#"> 
          Logout |
          </a>
      </li>
      <li class="nav-item">
        <a class="nav-link p-0 color-white" href="#"> 
          Test |
          </a>
      </li>
      <li class="nav-item">
        <a class="nav-link p-0 color-white" href="#"> 
          Logged in as: 
          <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" class="rounded-circle z-depth-0"
            alt="avatar image" height="35">
        </a>
      </li>
    </ul>
  </div>
</nav>


<p></p>
<h1>Hello, world!</h1>


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>