是否有可能将文本垂直居中在边界框中？

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

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

LINE-HEIGHT似乎没有解决这个问题。边界框仍然是关闭的，即使行高为0.我可以在我的元素顶部添加填充以尝试修复此问题，但这不会在使用此字体的许多元素中扩展。

看起来不均匀的空间是由于下降。这是有道理的，但不幸的是，它并没有让我更接近找出如何真正垂直居中这个文本。

有问题的字体是SouvenirStd介质，但我已经与其他许多网页字体注意到这一点。这是始终关闭，无论所使用元素... 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; 
}

来源

2016-04-27 lostPixels

*“问题在于字体本身。”* - 是的......没有一种方法可以解决这个问题。任何解决方案都是** font-dependent **。如果设计师如此坚持，让他们找到一个没有这个问题的字体。 –

尝试显示：块或其他内嵌的东西 –

您能提供您正在使用的CSS代码吗？ –

线

高度不会帮助问题，因为它会增加或减去的空间到单个文本行的顶部和底部的等量，基于字体本身内所限定的顶部和底部的间距（见line-height description at w3c欲知更多信息）。这意味着你需要找到一种不同的字体，以获得你想要的东西而不会偏离你的方式。

padding-top或padding-bottom如果您使用em作为单位，这是相对于字母总高度（包括上面和下面的空格）的工作很好。这将允许您通过相同的相对量翻过整个网页转向文字，字体大小的独立的（你可以使用从那里line-height来管理各条线之间的距离）：

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

改编从一个黑客，我发现in this blog post，这里如果以上不为你工作（但也有点窄的应用程序）一个可能的解决方案：

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值的基线（所以它们按字体大小进行缩放）
中途可以使用后选择器，但是需要文本周围的跨度（或其他行内渲染）元素被定位
只能工作用于非包装线

来源

2016-04-27 15:29:34 TheThirdMan

是否有可能将文本垂直居中在边界框中？

回答

相关问题