html - 将文本的基线与另一个元素的顶部对齐 (CSS)

Question

我确定以前有人这样做过，但我想不出一个足够好的搜索查询来找到任何相关内容。

我想将基线(不是文本元素的底部，文本本身的基线)与另一个 div 的顶部对齐。这也意味着我希望下降部分与其下方的另一个 div 相交。

HTML 看起来像这样:

<div id="text">text</div>
<div id="box"></div>

所以我希望 .text 的基线直接位于 .box 的顶部边缘之上，并且我希望下降部分(如“g”)相交进入 .box。我试图在 CSS 中使用 vertical-align 属性，但它不起作用。我有一种感觉，那就是我所需要的。有任何想法吗？谢谢!

See this image, the gray box would be .box and the text part is .text.请注意下降器向下进入盒子并且基线与盒子完全接触。

Answer 1

像这样，使用line-height？

#box{
  display:block;
  width:100%;
  height:200px;
  background-color:#ccc;
}
#text{
  text-align:center;
  font-size:48px;
  line-height:30px;
}

<div id="text">TEXT<em>pgjiq</em></div>
<div id="box"></div>

困难在于字体的高度不是由大写字母 T 的高度决定的——它还包括上升和下降。

没有办法让 CSS 识别上升端和下降端占用的空间量。逐个像素地微调它是最好的选择。

如果您担心这会在不同的屏幕上以及在放大和缩小时被保留下来，那应该没问题:浏览器非常擅长保留尺寸之间的比例。

也就是说，要 100% 确定的唯一方法是使用图像或 SVG。