css - 在具有背景图像的元素上使用垂直对齐

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

我想做的是实现垂直对齐：文本底部效果，但我不是在图像元素上这样做。我在一个带有背景图像集的元素上做这件事。如果您在此处粘贴上述代码：http: //htmledit.squarefree.com/

您将看到文本未能垂直对齐到底部。

如果可能的话，我想知道如何在不添加额外 html 元素的情况下完成它。

非常感谢大家。

Answer 1

您在文本之前关闭了 span 标签：

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

用这个：

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

希望有帮助。

Answer 2

你不能用花车做到这一点。您可以尝试使用display: inline-block，但浏览器支持很粗略。

编辑：http ://www.quirksmode.org/css/display.html

Answer 3

您无法获得像素完美的结果。这是我一直在使用的解决方法：

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

这使图标与文本很好地垂直居中对齐。padding-left与内联元素很好地配合使用。