具有不均勻垂直元素的 Bootstrap 導航欄

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 文本。 添加 Codepen 以供參考。

Answer 1

只需在我們占據 li 可用的完整高度的位置添加此 CSS，然后對齊<a> ：

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

下面的工作片段：

 /* 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>