代码之家 › 专栏 › 技术社区 › bobo

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

vertical-alignment css

bobo · 技术社区 · 15 年前

<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元素的情况下完成它。

多谢大家。

3 回复 | 直到 15 年前

Salman Arshad 15 年前

您无法获得完美的像素效果。以下是我一直在使用的解决方案:

<span style="background: url(http://www.reoiv.com/images/rss.jpg) no-repeat left center; padding-left: 20px;">è§çæ¬¡æ¸</span>

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

Kyle 15 年前

您在文本之前关闭了跨度标记:

<span id='span1'></span>è§çæ¬¡æ¸

使用此:

<span id='span1'>è§çæ¬¡æ¸</span>

希望有帮助。

RoToRa 15 年前

你不能用浮点数来做这个。你可以尝试使用 display: inline-block ,但浏览器支持还很粗略。

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

推荐文章

William Entriken · 排列不同尺寸的徽章

7 年前

user438461 · 在我的WPF选项卡项中设置VerticalContentAlignment会更改选项卡中的文本和选项卡中包含的控件

7 年前

SmallSani · 当更改内容时,如何在页面上垂直居中放置div?

7 年前

Benji · -webkit背景剪辑:文本和垂直居中文本

7 年前

Travis Martin · flexbox布局中的垂直文本

7 年前

Mike Waldrup · 弹性物品被撞倒,正好是前一件物品的一半高度

7 年前

karlo1zg · 垂直对齐输入元素中间的浮动标签

7 年前

Ahmed Elashker · Xamarin在平台垂直选项上形成XAML

7 年前

coreysimons · 动态布局中的图像对齐

7 年前

Théo Clayette · 设置垂直Android工具栏

7 年前