9

我现在一直在寻找几个小时(显​​然不是在正确的地方!)

请考虑这个示例: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 中工作

目标

非常感谢您的帮助!

4

4 回答 4

23

添加vertical-align: middle到您的图像。

编辑

根据评论,此解决方案还需要display:inline-block; .

于 2012-05-16T09:17:18.337 回答
2

这是有效的

http://jsfiddle.net/rizwanabbasi/frsA5/1/

于 2012-05-16T09:44:34.187 回答
0

我知道大多数设计师讨厌使用表格进行布局,但还是让我试试吧。您可以使用valign表。

于 2012-05-16T09:19:13.120 回答
0

最后结果

http://jsfiddle.net/rizwanabbasi/frsA5/

<div id="wrapper">
    <span id="text24">Text 24</span>
    <span id="text12">Text 12</span>
    <img src="http://www.adlittle.com/fileadmin/templates/images/rss_feed_icon.png" id="icon"/>
</div>

#wrapper{
    position:absolute; left:0;
}
#text24{
    font-size:24px; color:#999; font-weight:bold;
}
#text12{
    font-size:12px; color:#000; font-weight:bold; }
#icon{
    height:36px; width:36px;
    display:inline;
    vertical-align:middle;
    }
于 2012-05-16T09:33:38.840 回答