跨度垂直對齊

我有問題在跨度頂部垂直對齊文本。跨度垂直對齊

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

跨度垂直對齊

回答

相關問題