如何垂直对齐<li>元素，以使文本位于导航栏的中间（垂直而言）？

Question

我有2个要在这里解决的问题。

第一个是我不确定如何使<li>元素垂直对齐，以便文本位于导航栏的中间（垂直）吗？

第二个是由于某种原因，即使我将.logo设置为padding: 5px;也不起作用，除非在此之后输入！important。

*, *: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

您需要做的是：在导航栏中的<ul>中，应用以下样式：

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

这将使您的<ul>垂直居中，并作为额外的奖励做出响应！

Answer 3

要使导航垂直居中：navigation-ul {display: flex; align-items: center}

您的徽标填充必须具有！important，因为它的外观会覆盖另一种样式.navigation-ul>li:not(.dropdown)。