跨度垂直对齐

Question

我在跨度顶部垂直对齐文本时遇到问题。

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';
});​

Answer 1

大多数字体占用的每个字符的高度都超过了字符T所显示的高度。如果选择一些文字，您将能够清楚地看到这一点。选择的高度应该让您了解您使用的字体中每个字符的实际高度。如果选择突出显示被视为触及跨度的内部顶部，则表示文本确实是顶部对齐的。如果您发现选择的顶部与跨度的内部顶部之间存在任何间隙，则应该能够通过删除给予跨度的任何padding-top来纠正此问题。

Answer 2

vertical-align属性适用于整个块，而不适用于其中的文本。我不知道有什么方法可以让浏览器将字体视为整体字体的一部分而不是其高度。

您可以尝试Lettering.js之类的内容（或者只是做它做的事情）来对齐你的角色。

如果您只想在框顶部找到最高字符，则可以减少line-height设置。确切地说，取决于字体的大小，但0.9em周围的某些内容应该让你接近。