如何垂直对齐跨文本和图像 [英] How to vertically align spans with text and image

问题描述

我现在一直在寻找时间（显然不在正确的地方！）

I have now been looking for hours (obviously not in the right place!)

请考虑这个样本： http://jsfiddle.net/DYLs4/9/

<div id="wrapper">
    <span id="text24">Text 24</span>
    <span id="text12">Text 12</span>
    <span id="icon"></span>
</div>

css：

#text24{
    font-size:24px; color:#999;   
}
#text12{
    font-size:12px; color:#000;  
}
#icon{
    height:36px; width:36px;
    display:inline-block;
    background:url(some-icon.png);
}​

我想实现的是：

• 垂直放置text24（相对于图片）


• 将text12的底部与text24的底部对齐


• 确保整个工作在IE6 - > chrome

非常感谢您的帮助！

推荐答案

将 vertical-align：middle 添加到您的图片。

EDIT

对于每条评论，此解决方案还需要 display：inline-block; 。

Per comments, this solution also requires display:inline-block;.

这篇关于如何垂直对齐跨文本和图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！