如何在短距离对齐的ul中垂直对齐父对象及其子对象

Question

这是一张图片：我试图垂直对齐

我正在尝试将这些项目与文本顶部的图标对齐这是我的代码：

* {
margin: 0;
}
body {
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
padding: 0px;
margin: 0px;
}
a {
text-decoration: none;
margin: 5px;
color: black;
}
ul {
list-style: none;
padding: 0px;
}
.icon {
font-size: 36px;
vertical-align: middle;
}
.navbar {
z-index: 100;
background-color: #f1f1f1;
border-bottom: 1px solid black;
text-align: center;
padding: 5px;
margin-bottom: 25px;
}
.navbar ul li .leftNav {
display: inline;
float: left;
}
.navbar ul li .middleNav {
display: inline;
float: center;
position: relative;
}
.navbar ul li .rightNav {
display: inline;
float: right;
position: relative;
}

和我的html:

extends layout
block content
.navbar
ul 
li 
a(class="leftNav" href="#") Movies
i(class="fas fa-film icon")
li 
a(class="leftNav" href="#") Series
i(class="fas fa-film icon")
li
h1(class="middleNav")= title
p Welcome to #{title}

我可能缺少一个简单的解决方案，但我们非常感谢您的帮助，因为我已经四处寻找了30分钟，但仍然没有在网上找到任何解决方案。

Answer 1

您可以通过更新以下HTML 来实现这一点

.navbar
img(src='https://i.stack.imgur.com/uJjd5.png', alt='', style='display: block;')
ul(style='display: block;')
li
a.leftNav(href='#')
| Movies
i.fas.fa-film.icon
li
a.leftNav(href='#')
| Series
i.fas.fa-film.icon
li
h1.middleNav
p Welcome to 

并更新您的CSS:

.navbar {
z-index: 100;
background-color: #f1f1f1;
border-bottom: 1px solid black;
text-align: center;
padding: 5px;
margin-bottom: 25px;
display: flex;
flex-direction: column;
}

Answer 2

您可以尝试

i {
vertical-align: middle;
}

但通常要做到完美很难，我通常使用flexbox来校准

.navbar ul li .leftNav {
display: flex;
align-items: center;
}

Answer 3

您可以对li元素执行display:flex和align-items: center以获得所需的结果。你可以查看下面的代码

a {
text-decoration: none;
margin: 5px;
color: black;
}
ul {
list-style: none;
padding: 0px;
}
li a {
display: flex;
align-items: center;
}
.icon {
margin-left: 8px;
font-size: 36px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<ul>
<li>
<a href="" class="leftNav">
<span>Movies</span>
<i class="fas fa-film icon"></i>
</a>
</li>
<li>
<a href="" class="leftNav">
<span>Series</span>
<i class="fas fa-film icon"></i>
</a>
</li>
</ul>