Есть ли способ выровнять логотип по центру панели навигации?

Question

В настоящее время я могу добавить логотип на панель навигации, но кажется, что он начинается с той же высоты текста, в результате чего он не находится по центру по вертикали.

https://i.imgur.com/Av52Bc9.png

Я пробовал несколько разных выравниваний как класс, но ни один не работал.

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
         <a class="navbar-brand" href="Home">
             <img src="https://i.imgur.com/hTiYNNe.png" width="53" height="35" class="d-inline-block align-top ml-2" alt="">
             <li>@Html.ActionLink("About", "About", "Home")</li>
             <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
     </ul>
</div>

То, что я ожидаю увидеть, это логотип в виде кнопки «Домой», которая работает, но не по центру.

Answer 1

Это идеальный вариант использования свойства flexbox align-items: center. Он центрирует свои дочерние элементы по вертикали относительно родительского контейнера.

HTML

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
         <li><a class="navbar-brand" href="Home">
             <img src="https://i.imgur.com/hTiYNNe.png" width="53" height="35" class="d-inline-block align-top ml-2" alt=""/></a></li>
             <li>About</li>
             <li>Contact</li>
           </ul>
     </ul>
</div>

CSS

.nav {
  display: flex;
  list-style: none;
  padding: 16px 32px;
  justify-content: space-between;
  align-items: center;
  height: 75px;
  background-color: red;
}

Я очистил ваш HTML и добавил несколько базовых стилей для демонстрации.

Смотрите здесь для рабочего примера: https://codepen.io/anon/pen/QPdzMN

Но это похоже на проект Bootstrap. Бутстрап 3? Поэтому вы можете не захотеть переопределять стиль по умолчанию. Это тот случай?