html - 如何垂直对齐我的 <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;在你的 flex 容器上像这样:

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