Bootstrap 4在导航栏

Question

我正在尝试将图标垂直居中对齐到导航栏项目中的文本。

我尝试使用align-middle到nav-link，因为文本和图像都在那里，但是没有用。 将符号顶部移动到img只会将元素移动到顶部，但在对img执行对齐中时不起作用。 最后，我只实现了我想在img中添加margin-bottom，但是不想使用它，对齐中间有什么问题？

<ul class="navbar-nav mx-auto w-100 ">
      <li class="nav-item">
        <a class="nav-link align-middle" routerLink="/backoffice/jobs" routerLinkActive="active">
          <img src="/assets/icons/tuerca/B Tuerca GRAY.svg" class="iconos" alt="tuerca">
          <h4 class="d-inline">Test 1</h4>
        </a>
      </li>

      <li class="nav-item">
        <a class="nav-link align/middle" routerLink="/backoffice/contractors" routerLinkActive="active" style="display:block">
          <img src="/assets/icons/B_Toolbox_Gray.svg" class="iconos" alt="toolbox">
          <h4 class="d-inline">Test 2</h4>
        </a>
      </li>

      <li class="nav-item">
        <a class="nav-link align-middle" routerLink="/backoffice/jobs" routerLinkActive="active">
          <img src="/assets/icons/B_Hammer_Gray.svg" class="iconos " alt="hammer">
          <h4 class="d-inline">test 3</h4>
        </a>
      </li>
    </ul>

Answer 1

问题的一部分是在Bootstrap 4 <h4>元素中默认定义了底部边距。你可以通过设置.my-0来消除它 然后，要使图标和文本垂直对齐，请在.nav-link元素上使用.d-flex .align-items-center。这样，您也可以从.d-inline中删除<h4>。

<ul class="navbar-nav mx-auto w-100 ">
  <li class="nav-item">
    <a class="nav-link d-flex align-items-center" routerLink="/backoffice/jobs" routerLinkActive="active">
      <img src="/assets/icons/tuerca/B Tuerca GRAY.svg" class="iconos" alt="tuerca">
      <h4 class="my-0">Test 1</h4>
    </a>
  </li>

  <li class="nav-item">
    <a class="nav-link d-flex align-items-center" routerLink="/backoffice/contractors" routerLinkActive="active" style="display:block">
      <img src="/assets/icons/B_Toolbox_Gray.svg" class="iconos" alt="toolbox">
      <h4 class="my-0">Test 2</h4>
    </a>
  </li>

  <li class="nav-item">
    <a class="nav-link d-flex align-items-center" routerLink="/backoffice/jobs" routerLinkActive="active">
      <img src="/assets/icons/B_Hammer_Gray.svg" class="iconos " alt="hammer">
      <h4 class="my-0">test 3</h4>
    </a>
  </li>
</ul>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>