将文本基线对齐到 div 元素底部

Question

我试图将 div 中一些文本的基线与该div的底边对齐（这样像g和j这样的字符实际上会溢出该div）

我只能似乎将文本元素的底部边缘与 div 的底部边缘对齐。 我尝试在内外元素上使用值为 baseline 和 bottom 的vertical-align，但没有成功。

div {
  height: 80px;
  width: 300px;
  background: #ff5;
  position: relative;
}

span {
  font-size: 30px;
  position: absolute;
  left: 0;
  bottom: 0;
}

<div>
  <span>
  TEST gjp ABC
  </span>
</div>

我还希望能够从 div 底部 偏移 基线 (例如，bottom: 10px; 将文本的基线定位到距离 div 底部 10px 的位置)。 编辑： 我也想提到，我想在 span 元素上保留 position: absolute; 属性，因为我想在父 div 中自由定位多个元素。例如，在这里，A 的基线应该在 div 的底边缘，B 的基线应该在其上方 10px ，而C的基线则是 20px：

div {
  height: 80px;
  width: 300px;
  background: #ff5;
  position: relative;
}

span {
  font-size: 30px;
  position: absolute;
  left: 0;
  bottom: 0;
}

<div>
  <span style="left: 0px; bottom: 0px;">
  A
  </span>
  <span style="left: 50px; bottom: 10px;">
  B
  </span>
  <span style="left: 100px; bottom: 20px;">
  C
  </span>
</div>

- mrlux

Answer 1

添加高度为100%并 display: inline-block; 的 ::before 伪元素，并使用它将 <span> 垂直对齐到基线：

div {
  height: 80px;
  width: 300px;
  background: #ff5;
  position: relative;
}

div::before {
  display: inline-block;
  height: 100%;
  content: '';
}

span {
  font-size: 30px;
  vertical-align: baseline;
}

<div>
  <span>TEST gjp ABC</span>
</div>

您可以将相同的想法应用于 span 元素本身，但您需要指定 span 的高度：

div {
  height: 80px;
  width: 300px;
  background: #ff5;
  position: relative;
}

span {
  display: inline-block;
  font-size: 30px;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1em;
  background: red;
}

span::before {
  display: inline-block;  
  height: 100%;
  vertical-align: baseline;
  content: '';
}

<div>
  <span style="left: 0px; bottom: 0px;">gjp</span>
  <span style="left: 50px; bottom: 10px;">gjp</span>
  <span style="left: 100px; bottom: 20px;">gjp</span>
</div>

- Ori Drori

---

这个代码是可以工作的，但我想在span中保留position:absolute;，因为我想自由地定位父元素中的多个span元素。我在原始问题中没有明确说明这一点，所以我会进行编辑。 - lux

很抱歉再次打扰，但现在在::before元素和span实际文本之间似乎插入了一个空格。我需要span的左边缘在我指定的位置。如果间隙是一致的，我可以将span向左移动一定量，但间隙随字体大小而变化... - lux

那是一个空格。您可以在HTML中删除空格或使用此处提出的其他方法之一。我已更新HTML以删除空格。 - Ori Drori

哦，我明白了。我以为它在 ::before元素和文本之间添加了一个空格，而且由于::before只是一个伪元素，没有在HTML代码内指定，所以我认为我无法通过删除空格来摆脱它。谢谢！ - lux

Answer 2

你还可以将行高减小至0.8em，这样文本就会溢出span。

<div style="height: 80px; width: 300px; background: #ff5; position: relative;">
 <span style="font-size: 30px; position: absolute; left:0; bottom:0;line-height:0.8em;">
  TEST gjp ABC
 </span>
</div>

- G-Cyrillus

Answer 3

将带有line-height的span设置为0，然后考虑一个控制对齐的隐藏字符。根据所使用的字体，您可能需要调整该值：

.container {
  height: 80px;
  width: 400px;
  background: #ff5;
  position: relative;
}

.container>span {
  font-size: 30px;
  position: absolute;
  left: 0;
  bottom: 0;
  line-height: 0;
}

.container>span:before {
  content: "\200B";
  vertical-align: -0.35em;/* Adjust this */
}

<div class="container">
  <span>TEST gjp ABC</span>
  <span style="font-family:arial;right:0;left:auto;font-size:20px">TEST gjp ABC</span>
</div>

您也可以简单地考虑翻译：

.container {
  height: 80px;
  width: 400px;
  background: #ff5;
  position: relative;
}

.container>span {
  font-size: 30px;
  position: absolute;
  left: 0;
  bottom: 0;
  line-height: 0;
  transform: translateY(-0.35em);
}

<div class="container">
  <span>TEST gjp ABC</span>
  <span style="font-family:arial;right:0;left:auto;font-size:20px">TEST gjp ABC</span>
</div>

- Temani Afif