跨度垂直对齐

我有问题在跨度顶部垂直对齐文本。跨度垂直对齐

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

snapshot

来源

2012-02-21 pessi

您的预期成果是什么？ – 2012-02-21 16:50:26

您是否尝试过减少CSS行高属性值？ – shaunsantacruz 2012-02-21 16:51:56

您仍然可以看到最高元素和跨度顶部之间的距离。我想要最高的元素位于顶部，顶部没有间隙。 – pessi 2012-02-21 16:53:58

对于每个字符，大多数字体占用的字体高于字符T所显示的字体的高度。如果选择了某些文字，则可以清楚地看到这些字体。选择的高度应该让你知道你使用的字体中每个字符的实际高度。如果选择突出显示为触及跨度的内部顶部，则意味着文本确实是顶部对齐的。如果您发现选择的顶部与跨度的内部顶部之间存在任何间隙，则应该能够通过移除给定跨度的任何padding-top来纠正该问题。

来源

2012-02-21 16:57:26 techfoobar

我一直在认为padding-top左右有什么问题......但选择字体确实显示没有差距..对于我的应用程序来说，避免这种情况并不是非常关键，尽管本来是很好的。我想我会解决这个问题。不过，我会接受你的答案！ :) – pessi 2012-02-21 17:04:54

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

你可以尝试类似Lettering.js（或者只是做它）来对齐你的角色。

如果您只想在框的顶部输入最高的字符，则可以减少line-height设置。究竟有多少取决于字体，但在0.9em左右应该让你关闭。

来源

2012-02-21 16:49:44 Pointy

，你非常喜欢通向漂亮的“js”。然而，解决方案就像在我的情况下用锤子击中一个混乱，因为它不是非常重要的问题..我想会忍受它。可以接受2个答案吗？ – pessi 2012-02-21 17:06:21

不用担心 - techfoobar提供了一些关于字体间距的更清晰的信息:-) – Pointy 2012-02-21 17:08:02

跨度垂直对齐

回答

相关问题