水平對齊帶有jQuery按鈕的省略號文本

我想用jQuery按鈕水平對齊某些文本（w /省略號）並且無法弄清楚發生了什麼事情。水平對齊帶有jQuery按鈕的省略號文本

這是顯示我的問題的jsfiddle：

<span> 
    <span id='heading'>Long Heading That Requires Ellipsis</span> 
    <span id='hiddenID'>ID</span> 
    <button id='closeTab'></button> 
</span>

正如你所看到的，將出現該按鈕被一個小偏移（更低）的文本，我怎能讓他們顯示水平對齊？

我試過用填充，邊緣，垂直對齊沒有成功，搞清楚會真的很感謝你從任何你的CSS大師的幫助！謝謝！

來源

2013-12-10 A.O.

添加vertical-align:top到#closeTab：

#closeTab { 
    height: 16px; 
    width: 16px; 
    margin-left:5px; 
    vertical-align:top; 
}

jsFiddle example

來源

2013-12-10 23:35:23 j08691

啊啊啊謝謝！所以我明白這裏發生了什麼，文本默認是'vertical-align：top'，按鈕是默認的'vertical-align：bottom' ...這就是爲什麼它們最初被抵消了？ –

實際上，非替換內聯元素的默認垂直對齊是基線，因此您可以在'#heading上指定'vertical-align：top'來替代相同的結果。http://jsfiddle.net/j08691/5bVDu/9/ – j08691

哦，我明白了......感謝您的幫助！ –

水平對齊帶有jQuery按鈕的省略號文本

回答

相關問題