Question

我正在浏览material design specs，发现它们的行高为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的填充。它不是this question的副本。非常抱歉，我无法解释。

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

Answer 1

如果您想在文本上方添加“更多空间”，则可以将文本放入（其他）内联元素中，并在其上使用填充顶部。

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

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

不幸的是，尽管看起来不错，但文本实际上并未与行高的底部对齐。

因此，您实际上希望将“正常”字母（如C或D）放在最“底部”，并且具有长度不足的部分-f，j，g，p，q，..。。-这些部分是否在行的底部“挂出”？

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

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

1 个答案: