将文本与行首对齐答案

【问题标题】：Align text to top of line将文本与行首对齐
【发布时间】：2013-09-29 16:12:39
【问题描述】：

我有一个 div 里面有文字，line-height 超过了文字的高度。这意味着每行文本的顶部和下方都有空间。

右侧有一个垂直边框，我希望其顶部与文本顶部对齐。我需要以某种方式将文本与行首对齐。

这可能吗，或者有人可以在这里帮助我吗？

div{
    border-left: 1px solid black;
    line-height: 30px;
}

&lt;div&gt;Hello&lt;/div&gt;

【问题讨论】：

你能把这个弄好吗？
@GaneshPandhere jsfiddle.net/peTGY
align block elements on top when using line-height的可能重复

标签： vertical-alignment text-alignment css text-align

【解决方案1】：

不要弄乱行高：

div{
    position: relative;
    font-size: 16px;
    line-height: 24px;
    width: 25px;
    padding: 0px 0px 0px 10px;
}
div:before {
    position: absolute;
    content: '';
    top: 6px;
    left: 0px;
    bottom: 6px;
    width: 0px;
    border-left: 1px solid black;
}

top 和 bottom 的值应等于 (line-height - font-size) / 2，但由于字符高度不同，需要手动微调。

演示： http://jsfiddle.net/NcbB7/

【讨论】：

没问题先生，别当陌生人！