Bootstrap 4 align img and text in navbar

Question

I'm trying to align the icon vertically centered to the text in the nav bar items.

I tried using align-middle to the nav-link since both text and image are there, but did not work. Align-top to the img only moves the element to the top, but does not work when doing align-middle to the img. Finally, I only achieved what I wanted adding margin-bottom to the img, but do not want to use that, What is wrong with 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>

score 4 · Accepted Answer · answered Feb 04 '18 at 19:32

A part of the problem is that in Bootstrap 4 <h4> elements have a bottom margin defined by default. You can eliminate that by setting .my-0 on them.
Then to make the icon and the text vertically aligned, use .d-flex .align-items-center on the .nav-link elements. This way you can remove .d-inline from <h4> as well.

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

Bootstrap 4 align img and text in navbar

1 Answers1