HTML 元素未正确垂直居中对齐答案

【问题标题】：HTML elements do not align vertically to the middle properlyHTML 元素未正确垂直居中对齐
【发布时间】：2019-04-23 07:50:50
【问题描述】：

我正在尝试将两个 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>

【问题讨论】：

标签： html css vertical-alignment

【解决方案1】：

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

也许你想要的更像是这里的第二个例子？

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

【讨论】：

那没关系，我错了。我认为这与我提供给父元素的宽度有关