HTML元素未正确垂直于中间对齐

Question

我正在尝试将两个html元素（徽标文本和导航栏）垂直对齐到标题内的中间位置。但是，如果仔细观察，它们并不能为两个元素提供确切的对齐方式，因为一个元素似乎在两个元素中间的上方几像素处对齐。谁能帮助我使这些元素的中间位置准确对准？

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。