Question

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

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

我做了以下事情：

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

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

是否可以在给定的条件下与像素完美度垂直对齐例？使用的字体可能有问题吗？浏览器引擎有问题吗？

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

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

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

Answer 2

由于类d-flex，不确定是否已经在使用flexbox，但是如果是这样，则可以使用属性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>

垂直对齐并非像素完美

2 个答案: