Using vertical-align on an element with background-image
<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:t开发者_JS百科ext-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.
You closed the span tag before your text:
<span id='span1'></span>觀看次數
Use this:
<span id='span1'>觀看次數</span>
Hope that helps.
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
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.
精彩评论