對齊不同大小的文字在相鄰<spans>

請有人可以幫我解決這個問題，我已經過了拉我的頭髮的階段，不想結束禿頭！對齊不同大小的文字在相鄰<spans>

已經搜索過，閱讀並修改內聯/內聯塊，浮動，行高&字體大小的屬性>幾天，我有一個問題，我仍然無法理解 - 對齊基線的兩個文本元素。

我用圖像和兩個文本元素創建一個簡單（ish）按鈕：標題和標籤。我希望文本元素在相鄰的SPANS中以不同的字體大小（標籤爲右對齊）標題和標籤分開。

我只是希望相鄰跨度中的文本在行高度內垂直居中，但坐在共同基線上。問題在於，即使我使用下面提到的方法關閉時，我仍然在各種瀏覽器（特別是Opera）上看到不同的結果。我不願意進入特定於瀏覽器的CSS調整，因爲幾乎每個瀏覽器的結果都略有不同。我已經剝去了不必要的代碼元素（以及各種失敗的努力來獲得基線對齊，如線高度，垂直對齊，填充，邊距等）。所以我意識到我所擁有的不會像現在這樣工作。我也誇大了字體大小的差異，以更清楚地顯示問題。

我很抱歉，如果這個問題是一樣古老的時間本身，但沒有我在這裏找到的SO似乎解決了我的問題。

CSS：

.sn-border { 
position: relative; 
display: block; 
width: 237px; 
height: 25px; 
border-bottom: 1px solid #54534A; 
overflow: hidden; 
} 
.sn-border span { display: block; overflow: hidden; } 
.sn-label { width: 100%; line-height: 25px; } 
.sn-title, .sn-tag { float: left; } 
.sn-title { width: 165px; font-size: 14px; color: #54534A; } 
.sn-tag { width: 72px; font-size: 8px; text-align: right; color: #8C8C8C; }

標記：

<a href="#" class="sn-border"> 
<span class="sn-label"> 
<span class="sn-title">Example Heading 001</span> 
<span class="sn-tag">Example Label</span> 
</span> 
</a>

的jsfiddle： http://jsfiddle.net/sRLyM/

我敢肯定，這一定是簡單的，但我已經嘗試了一切都很我可以想到，閱讀我可以找到的與主題有關的每一個環節 - 都無濟於事。任何幫助將不勝感激。

來源

2013-04-12 Stef U

我不知道我是否明白你在找什麼，所以讓我知道我是否錯了。我認爲你需要使高度等於你的外部元素的高度。

eJsfiddlehttp://jsfiddle.net/sRLyM/1/

來源

2013-04-12 16:43:04 monika

嗨，謝謝你的回覆。我查了JSfiddle，這不是我正在尋找的東西，但感謝你的幫助......我認爲我詳細闡述了我的解釋。 –

對不起，它不會讓我編輯以前..感謝您的答覆 - 我想我詳細闡述了我的解釋有點。我檢查了鏈接，這不是我所需要的;我已經嘗試在內跨度/外跨度上的行高：25px無濟於事。我有一個外跨度我想要25px高，在這裏有2個跨度 - 兩個浮動，一個留下14px字體大小和一個右側8px字體大小。我希望兩者都在25px行高中垂直居中，但是在相同的基線上，所以它們看起來並不奇怪。我似乎無法實現這一點，但我嘗試... 我希望這樣做更有意義。 –

對齊不同大小的文字在相鄰<spans>

回答

相關問題