Question

我确定之前有人这样做过，但我无法找到足够好的搜索查询来查找相关信息。

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

HTML看起来像这样：

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

所以我希望.text将其基线直接放在.box的上边缘之上，我希望下降器（例如＆＃34; g＆＃34;）与{{ 1}}。我试图在CSS中使用.box属性，但它没有工作。我有一种感觉，这就是我需要的东西。有任何想法吗？谢谢！

See this image, the gray box would be .box and the text part is .text.请注意下降到框中的下降器和基线与框完全接触。

Answer 1

像这样，使用line-height？

＆＃13;

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

＆＃13;

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

＆＃13;

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

没有办法让CSS认识到上升器和下降器占用的空间量。逐个像素地推动它是你最好的选择。

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

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

Answer 2

试试这个：

fileNN_header

Answer 3

我能够完成图像显示的方式是在底部框中使用负边距。

*{
  margin: 0;
}

.text{
  background: lightgrey;
  font-size: 24px;
}
.box{
  background-color: tomato;
  width: 100%;
  height: 40px;
  margin-top: -12px;
}

Codepen

将文本基线与另一个元素（CSS）的顶部对齐

3 个答案: