<span>和<a>標籤不垂直對齊

我正嘗試在Facebook，Twitter等上使用精靈圖像創建鏈接。這些精靈圖像設置爲背景的鏈接有純文本。我有問題對齊文本，跨度和'a'鏈接垂直。<span>和<a>標籤不垂直對齊

這裏是CSS

.sprite a { 
    border:solid 1px blue; 
    width:20px; 
    height:20px; 
    display:inline-block; 
    color:#00f; 
    background:url('images/sprite.png') 0 0; 
} 

span { 
    border: solid 1px red; 
}

這裏是HTML

<div class="sprite"> 
    Follow us on: <span id="spriteFacebook"><a href="http://facebook.com"></a></span> 
</div>

我使用的邊界只是爲了識別錯位

這是結果怎麼看起來像

preview image of the problem http://i60.tinypic.com/1zco1z5.png

這些不應該默認對齊嗎？我應該使用浮動div來達到這個目的嗎？

來源

2014-03-30 Prateek Verma

設置'垂直對齊：中間;'到'.sprite''選擇器 –

_「這些不應該默認對齊嗎？」_ - 否，因爲在這裏'inline'元素中有'inline-block'。無論如何，'span'元素的好處似乎是多餘的（至少在你顯示的實際格式很少的情況下）。 – CBroe

感謝@RahilWazir提供簡單的解決方案！ –

試一下：
- 環繞你的文本跨度：<span class="text">Follow us on:</span>
- 浮它留下，並給它一個線高度：span.text { float: left; line-height: 33px; }

http://jsfiddle.net/6s4HM/20/

來源

2014-03-30 00:45:03 progzy

這個工作也完美......感謝您花時間。 –

<span>和<a>標籤不垂直對齊

回答

相關問題