Using vertical-align on an element with background-image

Question

<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>觀看次數

What I would like to do is to achieve the vertical align: text-bottom effect but I am not doing it on a image element. I am doing it on an element with background-image set. If you paste the above codes here: http://htmledit.squarefree.com/

You will see that the text failed to vertically align to bottom.

I would like to know how it can be done without adding extra html element if possible.

Many thanks to you all.

Answer 1

You closed the span tag before your text:

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

Use this:

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

Hope that helps.

Answer 2

You can't do that with floats. You could try using display: inline-block, but browser support is sketchy.

EDIT: http://www.quirksmode.org/css/display.html

Answer 3

You can't get pixel perfect results. Here is a work around I've been using:

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

This vertically center-aligns the icon nicely with the text. padding-left works nicely with inline elements.