将文本基线对齐到div的底部 [英] Align text baseline to bottom of div

问题描述

我正在尝试将 div 中某些文本的基线与所说的 div的最底边对齐（例如 g 和 j 这样的字符实际上会使div溢出）

I am trying to align the baseline of some text in a div to the very bottom edge of said div (such that characters like g and j would actually overflow the div)

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

I can only seem to align the bottom edge of the text element to the bottom edge of the div. I have tried to use vertical-align with values baseline and bottom on the inner and outer element, but without success.

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; 将文本 10px 。

I also want to be able to offset the baseline from the bottom of the div (e.g. bottom: 10px; positions the baseline of the text 10px from the bottom edge of the div).

编辑：我还要提一下，我想保留 position：绝对值； span 元素上的属性，因为我想自由地将父级 div。

I should also mention that I want to keep the position: absolute; property on the span element, because I want to freely position multiple of those in the parent div.

例如，在这里， A 的基线应位于div， B 应该在其上方 10px ，而 C 的 20px ：

For example, here, A's baseline should be at the bottom edge of the div, B's should be 10px above it and C's 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>

推荐答案

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

Add a ::before pseudo element with 100% height and display: inline-block; and use it to vertically align the <span> to the baseline:

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>

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

You can apply the same idea to the span itself, but you'll have to state the height of the 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>

这篇关于将文本基线对齐到div的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！