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 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.