垂直对齐不是像素完美的答案

【问题标题】：Vertical alignment is not pixel perfect垂直对齐不是像素完美的
【发布时间】：2019-06-03 16:00:36
【问题描述】：

我正在尝试在导航面板中垂直对齐标题。

但是，当我在图像查看器中检查屏幕截图时，我发现垂直对齐是像素不完美的。距离底部 1px 的间隙。

我做了以下事情：

1. 尝试：让flexbox垂直对齐H1，均匀分布下边距和上边距。我正在使用bootstrap 4 util 类。然而，还剩 1 个像素间隙。
1. 尝试：导航面板已明确定义高度为 50 像素。我试图在 H1 元素上设置line-height，它等于导航栏的高度。因此，当font-size 为13px 时，我预计文本上方和底部的间距将是相同的 50px - 13px 等于 = 37px。这个结果，37px 应该在顶部和底部之间均匀划分 - 18,5px。但是半像素呢，它们有用吗？问题仍然存在。
1. 尝试：将字体放大以填补 1px 的空白。所以字体大小设置为 14px。 50px - 14px 等于 36px，所以我假设剩余空间将在顶部和底部间距之间均匀划分 - 18px。但是，没有发生任何变化。

您会注意到 1px 的字体大小实际上并不匹配一个像素。

是否有可能与给定的像素完美垂直对齐例子？使用的字体会不会有问题？是浏览器引擎的问题吗？

HTML sn-p 1.try :

<nav>
      <div class="navbar navbar-expand-md p-0 pr-3 bg-dark align-items center">
            <a href="#" class="navbar-brand p-0">
                <img src="#" class="img-fluid" alt="...">
            </a>
          <div class="collapse navbar-collapse" id="navbarNav">
                <div class="navbar-nav w-100">
                    <h1 class="m-auto">
                        Air Quality Management System of the City of Olomouc
                    </h1>
                   <div class="flag-container">
                        <a class="mr-2" href="#">
                            <img class="img-fluid" src="#" alt="cs flag">
                        </a>
                        <a class="mr-2" href="#">
                            <img class="img-fluid active" src="#" alt="en flag">
                        </a>
                   </div>
               </div>
          </div>
      </div>
</nav>

HTML sn-p 2.try :

<nav>
    <div class="navbar navbar-expand-md p-0 pr-3 bg-dark align-items center">
        ... abrev. ...
        <div class="collapse navbar-collapse" id="navbarNav">
            <div class="navbar-nav w-100">
                <h1 class="mx-auto my-0">
                    Air Quality Management System of the City of Olomouc
                </h1>
              ... abrev. ...
            </div>
        </div>
    </div>
</nav>

CSS sn-p： 我添加的其他 css 规则，其余部分隐含地来自 bootstrap 4。

nav .navbar-brand img {
    max-height: 50px;
    padding-left: .25rem;
    background-color: #f10;
}

nav h1 {
    color: #fff;
    font-size: 13px;
    font-size: .8125rem;
    font-family: 'Hind';
    letter-spacing: .15px;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
}

CSS sn-p for 2. 尝试： 我添加行高等于导航栏的高度

nav h1 {
  color: #fff;
  font-size: 13px;
  font-size: .8125rem;
  font-family: 'Hind', sans-serif;
  letter-spacing: .15px;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 50px;
 }

【问题讨论】：

我尝试将字体增加一个像素（14px）以消除间隙。然而，它甚至没有帮助。“。为什么？当你这样做时发生了什么？你究竟想要发生什么？另外，你需要提供足够的代码来复制整个导航栏，而不仅仅是<h1> 标签，我们真正能够提供帮助。
@ObsidianAge 好的，我会尝试更具体的问题。

标签： html css bootstrap-4 vertical-alignment

【解决方案1】：

你有导航 h1。应该是h1{ 或.m-auto h1{ 或.navbar-nav h1。要使文本居中，请执行以下操作：

.navbar-nav h1 {
  ... your code ...
  vertical-align: middle;
 }

【讨论】：

【解决方案2】：

不确定您是否已经在使用 flexbox（因为 d-flex 类），但如果是，您可以使用属性 align-items: center 来对齐内容。

例如：

.navbar-nav {
  display: flex;
  align-items: center;
  background: #000;
}
.navbar-nav h1 {
  color: #fff;
  font-size: .8125rem;
  font-family: 'Hind', sans-serif;
  letter-spacing: .15px;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 50px;
 }

<div class="navbar-nav d-flex w-100">
  <h1 class="m-auto">
    Air Quality Management System of the City of Olomouc
  </h1>
  <div class="flag-container">
    ...
  </div>
</div>

【讨论】：