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

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>

在导航栏的右侧，我有两个元素，它们具有相同的类，没有垂直对齐。我一直在想，如果他们有相同的样式和标签类型，为什么会这样做

---

特别关注注销和以文本形式登录。添加代码笔以供参考

只需将此CSS添加到占用li可用完整高度的位置，然后对齐

你好，世界！

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