无法将图像垂直居中于导航栏项目（非品牌）

Question

我有一个问题，我真的无法找到答案。在bootstrap 4的导航栏中，我尝试在导航栏中的其中一个项目旁边添加图像（大多数问题都与导航栏品牌有关。这不是＆＃39;它）。

加载了bootstrap4（并且自定义alpha暗了）我有以下右对齐下拉列表：

    <ul class="navbar-nav">

        <li class="dropdown">
          <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <img src="https://cdn.discordapp.com/avatars/139412744439988224/a_30a390baf654dfe7f1c336037ea481d4.png?size=32" width="28" height="28" class="d-inline-block align-middle rounded-circle" alt=""> 
            Evie.Codes#4611
          </a>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
            <h6 class="dropdown-header"><i class="fa fa-user" aria-hidden="true"></i> Evie.Codes</h6>
            <a class="dropdown-item" href="/dashboard"><i class="fa fa-cogs" aria-hidden="true"></i> Dashboard</a>

              <a class="dropdown-item" href="/admin"><i class="fa fa-key"></i> Admin</a>

            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="/logout"><i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
          </div>
        </li>

    </ul>

使用图片，每个菜单项除了＆＃34;品牌＆＃34;部分略微向上移动。如果我删除图像，一切都完全居中。

我已经创建了一个小提琴，使几乎具有相同的行为，但由于某些原因，大多数菜单项都居中 - 它们不在我的环境中。 https://jsfiddle.net/ffksbv1v/

实际行为（强调红线）：

Answer 1

我无法确定，因为我无法完全重现它，但我认为这可能与图像比文本更大的事实有关。

此外，我认为这不是移动的菜单，但导航变大，因为填充和一切都保持不变，但你引入的图像大于文本，导致元素重新定位。 请注意，如果没有最后一张图片，包含填充的品牌高度恰好是容器div高度。但是在添加图像之后，品牌高度+填充低于容器div（5.5px），并且还低于div巫婆是其余元素（<div class="collapse navbar-collapse" id="navbar01">...</div> - 5px）的父级。

因此，解释可能是品牌a标签不居中。它看起来并不完全位于小提琴中（只有几个像素差异~5）。所以我建议尝试从上一个a元素（nav-link dropdown-toggle元素中删除填充  类 - 包含图片和Evie.Codes#4611），尝试将margin-top: auto; margin-bottom:auto;添加到品牌元素，或者找到另一种方法来brand。