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

Question

这是一张图片： 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 分钟，但仍然没有在网上找到任何解决方案。

Answer 1

你可以试试

i {
    vertical-align: middle;
}

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

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

Answer 2

您可以通过更新以下内容来实现此目的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 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>

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

How can I vertically align a Parent and its child in a hortizontally aligned ul?

html

css

alignment