Как выровнить блоки по вертикали в bootstrap?

Подскажите как можно выровнить внутри блока header меню и лого по вертикали
<header class="header">
  <div class="container">
    <div class="col-lg-3">
      <img src="img/WD.png" alt="">
    </div>
    <div class="col-lg-6 ml-auto">
      <nav>
        <ul class="menu d-flex justify-content: center; ">
          <li class="menu__item"><a href="#">Главная</a> </li>
          <li class="menu__item"><a href="#">Главная</a> </li>
          <li class="menu__item"><a href="#">Главная</a> </li>
          <li class="menu__item"><a href="#">Главная</a> </li>
          <li class="menu__item"><a href="#">Главная</a> </li>
        </ul>
      </nav>

    </div>
  </div>
</header>
  • Вопрос задан
  • 45 просмотров
Пригласить эксперта
Ответы на вопрос 2
Speik
@Speik
Веб-разработчик
Если я правильно понял
.container {
    display: flex;
    align-items: flex-start;
}
Ответ написан
У вас не правильная структура
<header class="header">
  <div class="container">
    <div class="row align-items-center"> <!-- должен быть .row --> <!-- .align-items-center - выравнивает по вертикали -->


Растягивайте хедер за счет содержимого
.header {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.menu__item > a {
display: block;
padding: 1.5rem 1rem;
}


Ну или на крайняк так:
.header {
display: flex;
align-items: center;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы