如何在引导程序4导航栏中垂直居中图像

Question

已编辑：已更新代码段

我正在使用Bootstrap4构建应用程序的前端，并且我尝试实现类似于AdminLTE仪表板包中存在的导航栏效果，其中用户的名称和照片在顶部导航栏中并排排列，但由于BS4使用相对尺寸，因此我无法正确对齐项目。

我尝试过使用实用程序类，但似乎无法弄清楚如何正确对齐元素。这是一些标记：

＆＃13;

＆＃13;

<nav class="navbar sticky-top navbar-expand-md navbar-dark">
  <div class="navbar-collapse collapse">
    <ul class="navbar-nav mr-auto">
      <li class="user nav-item">
        <a class="nav-link" href="#">
Link 1        </a>
      </li>
      <li class="user nav-item">
        <a class="nav-link" href="#">
          Link 2
        </a>
      </li>
      <li class="user nav-item">
        <a class="nav-link" href="#">
          Link 3
        </a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="user nav-item">
        <a class="nav-link" href="#">
          Link 4
        </a>
      </li>
      <li class="user nav-item">
        <a class="nav-link" href="#">
          Link 5
        </a>
      </li>
      <li class="user nav-item dropdown">
        <a class="nav-link" href="#">
          <img src="user.jpg" class="rounded-circle"> Username
        </a>
      </li>
    </ul>
  </div>
</nav>

＆＃13;

＆＃13;

＆＃13;

提前致谢。

Answer 1

您可以通过使用flex支持来实现。

.navbar-nav{
  display:flex;
  align-items:center;
}