【问题标题】：CSS align text within an html "line"CSS在html“行”中对齐文本
【发布时间】：2013-11-27 03:57:28
【问题描述】：

鉴于以下情况：

<div style="float: left; line-height: 24px;">
    Would<br />
    Be Nice<br />
    If Aligned<br />
To the "top"<br />
</div>

观察文本与 Chrome 中“行”的底部对齐（IE 似乎居中文本）。

有没有办法，不将每一行包装在一个 div（或 span）中以垂直在其“行”内对齐文本？

JSfiddle

【问题讨论】：

您能否更具体地说明您想要实现的目标？ jsfiddle.net 可能会帮助你！
我认为他的意思是line-height 在文本行上方而不是下方添加了更多空间（您可以在选择内容时看到）。添加了一个 jsfiddle。
Line-height 总是添加在每个字符的上方和下方。因此，如果您的字体大小为 12 像素，并且您的行高为 18 像素，那么您将在每个“行”上方获得 3 像素和下方 3 像素。这些 3px 空间中的每一个都称为“半前导”

标签： html css

【解决方案1】：

这种方法的一些问题：

来自align block elements on top when using line-height：

行高总是添加在每个字符的上方和下方。因此，如果您的 font-size 为 12px 并且您的 line-height 为 18px，那么您将在每条“线”上方获得 3px 和下方 3px。这些 3px 空间中的每一个都称为“半前导”

解决方案是相对定位每个元素，然后应用负边距，但我们不能在这里这样做，因为每一行都不是它自己的元素，根据：

有没有办法，不用将每一行包装在一个 div（或 span）中

如果您真的不愿意修改标记，这里有一个 JavaScript / CSS 解决方法。当文本上方有“半前导”时，我们无法进行顶部对齐。相反，我们需要去掉顶部和底部的line-height 间距，并在底部创建我们自己的间距。我们怎么知道每行的底部在哪里？好吧，我们可以使用<br/> 元素，但我们可以使用can't style a carriage return。

所以我们将使用 javascript 来获取我们可以设置样式的内容，然后以这种方式添加一些间距：

JavaScript：

$('br').before('<div class="spacer"></div>');

CSS：

.spacer {
    height: 24px;
    display: inline-block;
}

Working Demo in JsFiddle

应该是这样的：

**注意：使用inline-block div，您必须将高度设置为您想要的line-height 并将div 文本垂直对齐到top。您还可以使用regular div with a negative margin-top 来占用段落之间的额外空间。*

【讨论】：