是否可以将文本对齐到行高的底部？

Question

我查看了材料设计规范，发现它们的行高为20px，字体大小为14px，但文本仍与底部对齐。

我尝试复制它，但是它比我想象的要复杂得多。我来给你展示。

.a {
  background-color: rgba(0,0,0,0.1);
  line-height: 40px;
  font-size: 24px;
}

.b {
  margin-top: 16px;
  position: relative;
  overflow: hidden;
  
}
.b > p {
  background-color: rgba(0, 0, 0, 0.2);
  display: block;
  padding: 0;
  margin: 0;
  font-size: 24px;
  line-height: 56px;
  
  transform: translateY(16px);
}

<div class="a">
This text is vertically centered.
</div>

<div class="b">
<p>This text is also translated down to counter-act line-height. This text is also translated down to counter-act line-height. This text is also translated down to counter-act line-height. This text is also translated down to counter-act line-height. </p>
</div>

<div class="b">
<p>This text is translated down to counter-act line-height</p>
</div>

如您所见，行高自然使文本居中对齐。我有什么办法可以将其对齐到行高的底部，而无需进行所有这些错误的计算？

我不是试图将内容对齐到div的底部，此文本可以一直放在div的顶部。它在div中的位置不重要。我正在尝试创建多行段落，其中每行的高度为40px，但文本基线对齐到底部（本身）而不是中心。

在示例段落中，我使用的字体大小为24px，行高为40px。我希望多行段落具有40px的行，其中包含16px的空格，然后是24px的文本。现在，它以8px的空格，24px的文本开头，然后又是8px的空格开头。即使我将其与父div的底部对齐，由于40px的行高和24px的字体大小，底部仍然会有8px的填充。这不是这个问题的重复。很抱歉我无法解释。

感谢CBroe，找到了一个我认为更好的解决方案：https ://jsfiddle.net/fpyjx56o/38/

Answer 1

如果您希望在文本上方 \xe2\x80\x9c 更多空间 \xe2\x80\x9d ，则可以将文本放入（附加）内联元素中，并对其应用 padding-top 。

\n\n

\r\n

\r\n

p {\r\n  line-height: 40px;\r\n  font-size: 24px;\r\n}\r\n\r\np span {\r\n  padding-top: 10px;\r\n  background: #999;\r\n}

\r\n

<p>\r\n  <span>Lorem ipsum dolor sit amet, oratio doctus his an. Nisl saperet delenit ad\r\n    eos, his eros solet vituperata et, has tantas nemore consetetur ne. Nam cu autem nostro\r\n    verterem. Ne etiam detraxit adversarium eam, rebum epicurei ea ius. Appareat lucilius\r\n    invenire duo eu, an enim oportere duo, vidisse quaerendum at duo.</span>\r\n</p>

\r\n

\r\n

\r\n

\n\n

\n

不幸的是，虽然这看起来是正确的，但文本实际上并没有与行高的底部对齐。

\n

\n\n

因此，您实际上希望像 C 或 D 这样的“正常”字母位于最“底部”，并且具有任何长度不足的部分 - f、j、g、p、q，... - 有那些部分“挂在”线底部下方？

\n\n

如果您不为 span 元素选择纯色背景色，而是使用渐变色，那么这应该是可以实现的。这将允许您在行框的底部保留一些“透明”空间，这样看起来文本实际上实际上位于更高的位置。（也可以使用背景图像，但渐变可能可以更灵活地适应更改字体大小等。）

\n