Как выровнять мои элементы <li>по вертикали, чтобы текст находился посередине (по вертикали) моей панели навигации?

Question

У меня есть 2 проблемы, которые я пытаюсь решить здесь.

Во-первых, я не совсем уверен, как выровнять мои элементы <li> по вертикали так, чтобы текст находился прямо посередине (вертикально говоря) моей навигационной панели?

Вторым является то, что по какой-то причине, хотя я установил .logo на padding: 5px;, он не работает, ЕСЛИ Я не набираю! Важный после этого.

*, *:after, *:before {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
}
a {
    color: #f1f1f1;
}
html {
    font-size: 16px;
}
body {
    background-color: #fafafa;
    font-family: 'Roboto', sans-serif;
    height: 100%;
    width: 100%;
}
.navigation {
    background-color: #171717;
}
.navigation-ul {
    display: flex;
}
.navigation-ul>li:not(.dropdown) {
    padding: 15px 13px 15px 13px;
    font-weight: 500;
    text-align: center;
    font-size: 1em;
    color: white;
    background-color: #151719;
    list-style-type: none;
}
.logo img {
  width: 60px;
  height: 54px;
}
.logo {
  padding: 5px !important;
}

<nav class='navigation'>
    <div class="wrapper">
        <ul class="navigation-ul">
            <li class='logo'><img src='https://media.istockphoto.com/photos/red-background-ideal-for-christmas-picture-id152119339?k=6&m=152119339&s=612x612&w=0&h=Xxqd9B1xs5JymJYten1-cm2PESGtjen0evjxaCVOqoc='></li>
            <li><a href="#">Images</a></li>
            <li><a href="#">Albums</a></li>
            <li><a href="#">Tags</a></li>
            <li><a href="#">Upload</a></li>
        </ul>
    </div>
</nav>

Answer 1

Для вертикального выравнивания ваших элементов навигации установите align-items: center; на вашем гибком контейнере примерно так:

.navigation-ul {
    display: flex;
    align-items: center;
}

Answer 2

Для центрирования навигации по вертикали: navigation-ul {display: flex; align-items: center}

Ваш логотип должен иметь важное значение, потому что он переопределяет другой стиль, .navigation-ul>li:not(.dropdown), по внешнему виду.

Answer 3

Что вам нужно сделать, это: В <ul> внутри вашей панели навигации примените следующий стиль:

ul {
    margin-top: auto;
    margin-bottom: auto;
}

Это сделает ваш <ul> по центру по вертикали и отзывчивым в качестве дополнительного бонуса!