html - 垂直对齐不是像素完美的

Question

我试图在导航面板内垂直对齐标题。

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

我做了以下事情:

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

您会注意到 1 像素的字体大小在物理上并不真正匹配一个像素。

Is it possible vertically align with pixel perfection for given example? Could it be problem with used font? Is it problem with browser engine?

HTML 片段 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 片段 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 片段: 我添加的其他 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;
}

2 的 CSS 片段。试试: 我添加了 line-height 等于导航栏的高度

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;
 }

Answer 1

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

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