我在跨度顶部垂直对齐文本时遇到问题。
vertical-align: top
; text-top
等...不起作用,它是 display: inline-block
的跨度。
请查看代码和输出快照。
输出看起来更像是居中对齐而不是顶部对齐。
如果有人能提供帮助,那就太好了。
<span id="myspan" contenteditable="true" style="font-size:30px;"
class="textImage" >
This is text inside the span
</span>
<button id="mybutton" type="button">Increase Font</button>
CSS:
.textImage
{
border: solid 4px #000000;
min-height: 20px;
min-width: 240px;
display: inline-block;
font-family: Arial;
color: red;
vertical-align: text-top;
}
Javascript:
$("#mybutton").click(function(event) {
document.getElementById("myspan").style.fontSize =
(parseInt(document.getElementById("myspan").style.fontSize, 10)
+ parseInt(4, 10)) + 'px';
});
最佳答案
大多数字体占用的每个字符的高度都比字符 T 明显占用的高度高。如果您选择一些文本,您将能够清楚地看到这一点。选择的高度应该让您了解所用字体中每个字符的实际高度。如果选择突出显示被视为触及跨度的内部顶部,则意味着文本确实是顶部对齐的。如果您注意到所选内容的顶部和跨度的内部顶部之间有任何间隙,您应该能够通过删除任何给该跨度的 padding-top
来纠正它。
关于javascript - 跨度垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9381518/