CSS：如何在span或div中垂直对齐文本

问题描述

我读了很多关于如何垂直对齐元素内部内容的技巧。我找不到一个完全符合我想要的东西。

为简单起见，我有一个div容器和一个带有文本的跨度，如下所示：

<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字体家族（我真正想要的字体家族），情况甚至更糟。

奇怪的是，字母的顶部现在不触及范围的顶部（？！）我尝试使用position: relative来操作跨度内的文本并更改top和bottom，并且还尝试使用transform: translateX()函数，但无济于事。 / p>

所以您可能想知道为什么小空间如此重要。好吧，当我对我的跨度应用剪切路径时，0 50％的多边形不在文本的中心，实际上，由于底部的面积很大，它会将文本剪切到几乎100％的高度的字母，像这样：

是的，我知道我可以将其裁剪到Y轴的30％左右，大约是文本的50％，但是1）这将根据字体系列而改变，并且2）到底是什么？这是怎么回事？

我没有尝试使用flexbox，因为我不接受纯粹的CSS不能做到那样简单。但是也许我想念一些东西。有人看过吗？我猜字体“ definition”的底部有很大的空间供某些怪异的字符使用，因此罗马字母位于该空间的顶部，而底部则浪费了？

编辑（对justinw的答复）：我在jsfiddle中粘贴在注释上的代码在FF和Chromium中都显示错误：

至于第二个链接，在jsfiddle中使用flex时，字体大小太小，所以我增加了对其的检查，在FF中显示错误

但这在Chromium中是正确的：

但是，即使在Chromium中，它也会失败，font-family: monospace;

我不知道为什么：（

编辑（对肯尼的回答）：与justinw的答案一样。在FF中失败：

它可以在Chromium中使用：

但是如果字体家族是等宽字体，则在Chromium中失败：

编辑（对德克斯特人的回答）：为了可视化目的，我在跨度中添加了灰色背景。我将以下jsfiddle的屏幕截图粘贴到了FF中。 vertical-align无效。它失败了：

在Chromium中，垂直对齐确实会影响定位并且它可以工作（甚至比使用flex的尝试要好一点，因为“ y”字母的底部在span框内：

但是即使在Chromium中，如果字体家族是等宽字体，它也会失败：

解决方法

尝试垂直对齐：基线要么保证金：0自动；

clip-path text-alignment

CSS：如何在span或div中垂直对齐文本

问题描述

解决方法

相关问答