Parece que no puedo lograr que el logotipo de la barra de navegación se alinee con el centro de enlaces de navegación debajo de él. Estoy seguro de que me falta algo simple, he revisado algunas otras publicaciones sobre este problema, pero todas parecen estar usando versiones anteriores de bootstrap. Actualmente estoy usando bootstrap 4.0.

Específicamente, quiero el logotipo en su propia fila separada, no en la misma que los enlaces.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="img/h-tech-logo-cropped.png"/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Our Services</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About Us</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Gallery</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Contact Us</a>
    </li>
  </ul>
</div>