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'>觀看次數</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;">觀看次數</span>

这个垂直居中 - 使图标与文本很好地对齐。 padding-left可以很好地处理内联元素。

在带有背景图像的元素上使用vertical-align

3 个答案: