如何在水平对齐的 ul 中垂直对齐父级及其子级？

如何解决如何在水平对齐的 ul 中垂直对齐父级及其子级？

这是一张图片： What I am trying to align vertically

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

* {
    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 分钟，但仍然没有在网络上找到任何解决方案。

解决方法

您可以通过更新以下 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;
}

,

你可以试试

i {
    vertical-align: middle;
}

但通常很难做到完美，我通常使用 flexbox 进行对齐

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

,

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

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>