我有一个div,里面有文本,line-height
大于文本的高度。这意味着每行文本的顶部和下方都有空间。
右侧有一个垂直边框,我希望其顶部与文本顶部对齐。我需要以某种方式将文本对齐到其行的顶部。
这可能吗,或者有人可以在这里帮助我吗?
div{
border-left: 1px solid black;
line-height: 30px;
}
<div>Hello</div>
在不弄乱行高的情况下:
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/