Html 如何将 img 与文本内联
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9201756/
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 put img inline with text
提问by Mazzy
I have this code:
我有这个代码：
<div class = "content-dir-item">
<p>Text input</p>
<img src="./images/email.png" class = "mail" alt="img-mail" />
</div>
I would put img inline with text using css. How can I do this?
我会使用 css 将 img 与文本内联。我怎样才能做到这一点？
回答by elclanrs
Images have display: inlineby default.
You might want to put the image inside the paragraph.<p><img /></p>
图片display: inline默认有。
您可能希望将图像放在段落中。<p><img /></p>
回答by circusdei
This should display the image inline:
这应该显示内联图像：
.content-dir-item img.mail {
display: inline-block;
*display: inline; /* for older IE */
*zoom: 1; /* for older IE */
}
回答by ADM
Please make use of the code below to display images inline:
请使用以下代码内联显示图像：
<img style='vertical-align:middle;' src='somefolder/icon.gif'>
<div style='vertical-align:middle; display:inline;'>
Your text here
</div>
