HTML 元素没有正确地垂直对齐到中间

Question

我正在尝试将两个 html 元素( Logo 文本和导航栏)垂直对齐到页眉内的中间。但是，如果您仔细观察，它们并没有提供两个元素的精确对齐，因为一个元素似乎在两个元素的中间上方几个像素处对齐。任何人都可以帮助我准确对齐这些元素的中间吗？

body {
    margin: 0;
}

.main-header {
    background-color: #0a0a0a;
    color: #ffffff;
    padding: 8px 25px;
    text-align: middle;
    border-bottom: 2px solid #df802e; 
}

.main-header_brand {
    display: inline-block;
    font-size: 1.5rem;
    text-align: right;
    vertical-align: middle;
}

.main-header_brand a {
    display: inline-block;
    text-decoration: none;
    color: #f1f1f1;
}

.main-header_brand a span {
    color: #df802e;
}

.main-header_navbar {
   display: inline-block;
   width: calc(100% - 180px);
   text-align: right;
   vertical-align: middle;
}

.main-header_navlinks li {
    display: inline-block;
    margin-left: 20px;
}

.main-header_navlinks li a {
    text-decoration: none;
    color: #f1f1f1;
}

.main-header_navlinks li a:hover {
    color: #df802e;
}

<header class="main-header">
  <div class="main-header_brand"><a href="index.html">MY<span>BRAND</span></a></div>
  <nav class="main-header_navbar">
     <ul class="main-header_navlinks">
       <li><a href="#about">ABOUT MYBRAND</a></li>
      <li><a href="#how">HOW CALCULATOR WORKS</a></li>
    </ul>
  </nav>
</header>

Answer 1

从您向我们展示的内容来看，这些元素在我看来确实是垂直对齐的。我的意思是，它们位于中间上方和下方几个像素处 - 这是可以预料的，因为它们的高度不同。

也许您想要的是这里的第二个示例？

在这种情况下，我建议您放弃垂直对齐，而只需设置其父元素的 padding-bottom 即可。