Html 如何将跨度与文本和图像垂直对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10615365/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to vertically align spans with text and image
提问by Johann
I have now been looking for hours (obviously not in the right place!)
我现在一直在寻找几个小时（显然不是在正确的地方！）
Please consider this sample: http://jsfiddle.net/DYLs4/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:
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);
}?
?
?
What I'm trying to achieve is this:
我想要实现的是：
- Center vertically the text24 (relative to the image)
- Align the bottom of text12 with bottom of text24
- Make sure the whole thing work in IE6 -> chrome
- 垂直居中 text24（相对于图像）
- 将 text12 的底部与 text24 的底部对齐
- 确保整个事情在 IE6 -> chrome 中工作
Many thanks for your help!
非常感谢您的帮助！
回答by slash197
Add vertical-align: middleto your image.
添加vertical-align: middle到您的图像。
EDIT
编辑
Per comments, this solution also requires display:inline-block;.
根据评论，此解决方案还需要display:inline-block; .
回答by cgvector
回答by Dewfy
I know most of designers hate use table for layout, but let me try anyway.
You can use valignof table.
我知道大多数设计师讨厌使用表格进行布局，但无论如何让我尝试一下。您可以使用valign表。
回答by cgvector
Final result
最后结果
http://jsfiddle.net/rizwanabbasi/frsA5/
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;
}
