在具有背景圖像的元素上使用垂直對齊方式

<style type='text/css'> 
#span1{ 
background-image:url("http://www.reoiv.com/images/rss.jpg"); 
background-repeat:no-repeat; 
cursor:pointer; 
display:block; 
float:left; 
height:15px; 
width:15px; 
vertical-align:text-bottom; 
} 
</style> 

<span id='span1'></span>觀看次數

我想要做的是實現垂直對齊：文本底部效果，但我沒有在圖像元素上進行此操作。我正在做一個背景圖像集的元素。如果您將上面的代碼粘貼到此處：http://htmledit.squarefree.com/在具有背景圖像的元素上使用垂直對齊方式

您將看到文字未能垂直對齊到底部。

我想知道如何在不添加額外html元素的情況下做到這一點。

非常感謝大家。

來源

2010-05-11 bobo

您可以在jsfiddle.net上設置現成的實例 – Kyle 2010-05-11 09:25:04

我想移除寬度或高度限制之一：對於那麼多的文本，15 * 15是不夠的。 – ANeves 2010-05-11 09:55:09

你不能得到像素完美的效果。這裏是我一直在使用的工作：

<span style="background: url(http://www.reoiv.com/images/rss.jpg) no-repeat left center; padding-left: 20px;">觀看次數</span>

這個垂直居中對齊圖標很好地與文本。 padding-left與嵌入式元素很好地協同工作。

來源

2010-05-11 09:29:09

你的文本之前關閉跨度標籤：

<span id='span1'></span>觀看次數

使用此：

<span id='span1'>觀看次數</span>

希望有所幫助。

來源

2010-05-11 09:24:24 Kyle

你不能這樣做與浮游物。你可以嘗試使用display: inline-block，但瀏覽器的支持是粗略的。

編輯：http://www.quirksmode.org/css/display.html

來源

2010-05-11 09:27:30 RoToRa

這不是粗略的，除IE之外很好...自然。 IE只將它應用於自然內聯的元素 - 並且跨越其中一個元素，它會起作用。 – ANeves 2010-05-11 09:50:40

@收件人：你說得對。在查找鏈接之前，我寫了「粗略」部分。我似乎記得FF3有問題，但這似乎不是真的。 – RoToRa 2010-05-11 10:14:38

好吧，你說得對，我只是在挑剔而脾氣暴躁 - 我同意粗略的描述是一個好詞。但總是IE總是詛咒。我們期望什麼其他瀏覽器過期？甚至當版本9幾乎在那裏時，還有什麼其他瀏覽器可以讓人們仍然期待版本6？這真是荒謬可笑。 = | – ANeves 2010-05-11 10:43:28

在具有背景圖像的元素上使用垂直對齊方式

回答

相關問題