Как выровнять по центру элементы?

Question

[Danya Kozlovskiy]

Как выровнять эти элементы в одну линию с картинкой по горизонтали?



HTML:

<div class="header-menu">
    <div class="container">
      
  <nav>
    <ul>
      <li><a href="./index.html"><img class="logo" src="./img/pngegg.png" alt=""></a></li>
      <li><a href="./index.html">Главная</a></li>
      <li><a href="./catalog.html">Каталог</a></li>
      <li><a href="./contacts.html">Контакты</a></li>
    </ul>
  </nav>
  <hr>
</div>
</div>

CSS:

.header-menu {
    & ul{
        display: flex;
        justify-content: space-between;
    }

    & a{
        text-decoration: none;
        color: #fff;
        font-size: 24px;
        transition: .3s;
    }
    & a:hover{
        color: #ebdede;
    }
}

Answer 1

[Владислав Черненко]

align-items:center; для UL

Comments

[Danya Kozlovskiy]

Спасибо большое, совсем забыл, что кроме text-align есть align-items.

Answer 2

[Уалихан Оразбаев]

Пропишите к тегу a/li внутри меню свойство line-height: (высота меню)px; либо же примените к ul свойство align-items: center