【发布时间】：2021-01-10 06:45:15
【问题描述】：
我阅读了很多很多....很多关于如何垂直对齐元素内的东西的技巧。我找不到完全符合我要求的。
为了简化，我有一个 div 容器和一个带有文本的 span，如下所示：
<html>
<body>
<div class="container">
<span>My Text</span>
</div>
</body>
</html>
我只是希望我的文本在跨度中垂直对齐。这是我用来尝试对齐它的基本 CSS。
.container {
margin: 20px 0;
height: 200px;
line-height: 200px;
text-align: center;
}
.container span {
color: white;
font-size: 200px;
font-weight: 900;
line-height: 200px;
vertical-align: middle; /* no effect */
}
这是检查员的样子：
请注意，大写字母的顶部碰到跨度的顶部，但字母的底部，尤其是y 以外的其他字母远离span 的底部。 monospace font-family（这是我真正想要的）让情况变得更糟。
奇怪的是，字母的顶部现在不会碰到跨度的顶部（？！）
我尝试使用position: relative 操作跨度内的文本并更改top 和bottom，我还尝试使用transform: translateX() 函数，均无济于事。
所以你可能想知道为什么这么小的空间很重要。好吧，当我将剪辑路径应用于我的跨度时，0 50% 的多边形不在文本的中心，事实上，由于底部的巨大区域，它将我的文本剪辑到几乎 100% 的高度的字母，像这样： 是的，是的，我知道我可以将它剪辑到 Y 轴的 30% 左右，并且是文本的 50% 左右，但是 1）这会根据字体系列而改变 2）这到底是什么？这是怎么回事？
我没有尝试过使用flexbox，因为我不接受纯 CSS 不能做这样简单的事情。但也许我错过了一些东西。有人见过这个吗？
我猜字体“定义”的底部有很大的空间为一些奇怪的字符保留，所以罗马字母位于空间的顶部，而底部区域被浪费了？
编辑（对 justinw 的回答）：
我在 jsfiddle 中粘贴在注释中的代码在 FF 和 Chromium 中都显示错误：
至于第二个链接，jsfiddle中的flex，字体太小，所以我增加检查它，它在FF中显示错误
但这在 Chromium 中是正确的：
但即使在 Chromium 中，font-family: monospace; 也会失败
我不知道为什么:(
编辑（对肯尼的回答）： 与justinw的答案一样。它在FF中失败： 它适用于 Chromium： 但如果字体系列是等宽字体，则在 Chromium 中失败：
编辑（对 Dexterians 的回答）：
出于可视化目的，我在跨度中添加了灰色背景。
我在 FF 中粘贴了下面 jsfiddle 的屏幕截图。 vertical-align 无效。它失败了：
在 Chromium 中，垂直对齐确实会影响定位并且它可以工作（甚至比使用 flex 的试验要好一点，因为“y”字母的底部位于跨度框内：
但即使在 Chromium 中，如果 font-family 是等宽字体，它也会失败：
【问题讨论】：
-
在 Safari 14 上，text appears centered 使用您的代码。出于好奇，为什么使用
flexbox不是“纯 CSS”？添加display: flex和align-items: center是一种快速简便的方法to vertically align stuff within a container。 -
尝试将这些应用到 .container: display: flex;对齐项目：居中；证明容器：中心； jsfiddle.net/KennyChoy/ej2z9c8d/5
-
您的代码在 Chrome 中对我来说运行良好，关闭或打开
vertical-align确实会影响文本； jsfiddle.net/v0n5db4j - 我认为它要么是浏览器，要么是您在其他地方有其他代码影响了您的元素。 -
居中时，您需要先定义 center，这是您无法真正做到的事情，因为所有字体都不同，而且它们的设计方式也不相同。实际上，您展示的所有尝试都是居中的，但您根本不喜欢它们的外观。同样使用 line-height 等于 font-size 会导致意想不到的结果......我们通常使用大于 font-size 的 line-height
-
因为字体不一样，所以等宽字体不是唯一的字体。每个浏览器都有自己的默认等宽字体（等宽字体是一种字体）。尝试使用像谷歌字体这样的显式字体，它会在任何地方呈现相同的（阅读我的第二个副本以获取更多详细信息）
标签： css text-alignment clip-path