Материализация центра по вертикали lo go марка на navbar

Question

У меня есть следующий фрагмент кода HTML для панели навигации. Использование материализации фреймворка

<div class="nav-wrapper">
    <a href="#" class="brand-logo valign-wrapper logo">
        <img src="{% static 'imgs/logo_transparent_bg.png' %}" width='40px'>
    </a>
    <a href="#" class="brand-logo center hide-on-med-and-down">
        Heartist
    </a>
    <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="fas fa-bars"></i></a>
    <ul class="right hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">Javascript</a></li>
        <li><a href="mobile.html">Mobile</a></li>
    </ul>
</div>

CSS:

.logo > img {
  position: relative;
  top:1.4vh;
  margin-left: 5px;
  margin-right: 5px;

}

Вот предварительный просмотр: http://i.imgur.com/yk3AGoa.png

Проблема в том, что это не отзывчивый Если я масштабирую или проверяю свой телефон, lo go не был вертикально отцентрирован.

Есть идеи без использования точек останова X?

Заранее спасибо