Html 如何垂直对齐'；电子邮件促销'；img旁边顶部导航栏中的文本以及其他文本链接？

我一直在努力学习CSS和HTML，但有几件事我很难做到。我似乎可以了解如何使用CSS在页面上定位元素？我需要垂直对齐顶部导航栏内的元素，但我似乎一辈子都找不到它。我不仅仅是在寻找一个简单的答案，我还想解释一下我做了哪些不正确的事情，这些错误使我无法将元素移动到需要的位置：） 任何帮助都将不胜感激。 下面是代码和js fiddle链接

正文{
保证金：0；
}
.顶杆{
背景色：#17D8C7；
高度：35px；
溢出：隐藏；
对齐项目：居中；
填充：0.2%0.2%；
}
.顶杆{
显示器：flex；
证明内容：之间的空间；
}
托巴保险公司{
保证金：0；
左侧填充：0；
列表样式：无；
位置：相对位置；
显示：内联块；
}
托巴·乌利先生{
显示：内联块；
垂直对齐：中间对齐；
}
托巴·乌尔·李先生{
显示：内联块；
文本对齐：居中；
垂直对齐：中间对齐；
文字装饰：无；
}
topbar ul li img{
高度：24px；
填充：5px 5px 0px 0px；
}
李先生{
垂直对齐：中间对齐；
}

全套套房

从img标签上移除衬垫顶部。当我们使用

垂直对齐：中间；时，它将阻止默认居中

此外，您还需要在锚点内的span和img标记上添加
vertical align:middle
，而不是锚点

.topbar ul li a span {
    vertical-align: middle;
}
.topbar ul li img {
  height: 24px;
  padding: 0 5px 0px 0px;
  vertical-align: middle;
}


正文{
保证金：0；
}
.顶杆{
背景色：#17D8C7；
高度：35px；
溢出：隐藏；
对齐项目：居中；
填充：0.2%0.2%；
}
.顶杆{
显示器：flex；
证明内容：之间的空间；
}
托巴保险公司{
保证金：0；
左侧填充：0；
列表样式：无；
位置：相对位置；
显示：内联块；
}
托巴·乌利先生{
显示：内联块；
垂直对齐：中间对齐；
}
托巴·乌尔·李先生{
显示：内联块；
文本对齐：居中；
文字装饰：无；
}
topbar ul li a跨度{
垂直对齐：中间对齐；
}
topbar ul li img{
高度：24px；
填充：0 5px 0px 0px；
垂直对齐：中间对齐；
}

全套套房













其他文本链接-博客、关于我们和联系人-似乎垂直居中

电子邮件促销的问题在于，您将
span
标记嵌入同样包含
img
标记的
li
标记中的方式。
正如另一张海报所回答的那样，如果您愿意，您可以添加css来明确地垂直对齐此
span

但是，为什么不让它成为两个
li
标记呢？一个用于图像，一个用于文本

即


电子邮件促销

如果您需要更多指导，请告诉我。
非常感谢您解释了为什么它不能完美工作：）我已经使用了调整和附加css，因为我不想为电子邮件促销元素提供两个单独的链接。我唯一的问题是你对如何更深入地学习CSS和html有什么建议吗？我已经完成了w3schools的教程和练习，但我需要在真实场景中进行演示。
<li><a href="#"><img src="https://s8.postimg.cc/ytbr47v39/contact-email.png" alt="Email Promotions Sign Up"></a></li>
<li>Email Promotions</li>