Bootstrap 4在导航栏中对齐img和文本答案

【问题标题】：Bootstrap 4 align img and text in navbarBootstrap 4在导航栏中对齐img和文本
【发布时间】：2018-07-14 16:27:13
【问题描述】：

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

我尝试使用 align-middle 到导航链接，因为文本和图像都在那里，但没有工作。 align-top to the img 仅将元素移动到顶部，但在对 img 执行 align-middle 时不起作用。最后，我只实现了我想要在img中添加margin-bottom，但不想使用它，align-middle有什么问题？

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

【问题讨论】：

标签： image text alignment bootstrap-4

【解决方案1】：

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

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

【讨论】：