将文本基线与 div 的底部对齐

Question

我正在尝试将 div 中某些文本的基线与所述 div 的最底部边缘对齐（这样的字符 [= =17=] 和 j 实际上会溢出 div)

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

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>

我还希望能够 offset 从 div 底部的基线（例如 bottom: 10px; 定位文本的基线 10px距div).

底边

编辑： 我还应该提到我想在 span 元素上保留 position: absolute; 属性，因为我想自由定位父级中的多个 div.

比如这里A的基线应该在div,B的底边' s 应该在它上面 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>

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>

您可以将相同的想法应用于跨度本身，但您必须说明跨度的高度：

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>

Answer 2

您还可以将行高减小到 0.8em，这样文本就会溢出跨度。

<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>

Answer 3

使 line-height 的跨度等于 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: "0B";
  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>

将文本基线与 div 的底部对齐

Align text baseline to bottom of div

html

css

alignment

vertical-alignment

baseline