是否可以在其边界框中垂直居中文本？

Question

我的文字不是垂直居中的，我的设计师正在指出它。

但是，我使用适当的CSS来实现垂直居中，这不是问题。

问题在于字体本身。字形不在实际文本中居中。选择文本会显示其边界框，从这里我可以看到文本下面的空间不均匀。

行高似乎无法解决此问题。即使行高为0，边界框仍然是关闭的。我可以在我的元素顶部添加填充以尝试解决此问题，但这不会在使用此字体的许多元素上进行扩展。

看来不平坦的空间是因为下降。这是有道理的，但不幸的是，它并没有让我更接近于弄清楚如何真正垂直居中这个文本。

有问题的字体是 SouvenirStd-Medium ，但我注意到这与许多其他网络字体有关。无论使用哪种元素，它都会一直关闭...... h1，段落标签等。

虽然它可能不会有用，但这是一个标题样式的例子：

font-family: SouvenirStd-Medium;
font-size: 5rem;
font-weight: 400;
font-style: normal;
line-height: 1.3;
letter-spacing: 0;

以及我如何将文本置于包装标签中心的示例。

div {
   display: flex;
   height:100px;
   align-items: baseline;
}

Answer 1

行高无助于此问题，因为它会根据字体本身定义的顶部和底部间距在单个文本行的顶部和底部添加或减去相等的空间量（请参阅{{3} } 欲获得更多信息）。这意味着你需要找到一个不同的字体，以便得到你想要的东西而不会忘记。

如果您使用em作为单位，

padding-top或padding-bottom效果很好，相对于字母的总高度（包括上下空格）。这将允许您将文本移动到整个网页上相同的相对数量，与字体大小无关（并且您可以使用line-height来管理各行之间的距离）：

.font-timesnewroman {
  font-family: 'Times New Roman', serif;
  padding-top: 0.1em;
}

改编自我发现的line-height description at w3c黑客攻击，如果以上内容对你不起作用（在应用程序中也有点狭窄），这里有一个可能的解决方案：

div {
  height: 100px;
  margin-top: 40px;
  border: thin dotted gray;
  text-align: center;
}
.text {
  font-size: 100px;
  line-height: 0px;
  background-color: #9BBCE3;
}
.text::after {
  content:'';
  display: inline-block;
  height: 80%; /* adjust this to shift the text */
}

<div>
  <span class="text">Test</span>
</div>

这具有以下特征和限制：

• 适用于上述解决方案没有的元素，例如因为您尝试设置的元素已经有了填充
• 允许您使用百分比或em值调整基线（因此它们可以使用font-size进行缩放）
• 使用后选择器实现中途，但需要在文本周围放置一个span（或其他内联呈现）元素
• 仅适用于非包装线