如何将img与文本内联

【问题标题】：How to put img inline with text如何将img与文本内联
【发布时间】：2020-04-21 21:56:01
【问题描述】：

我有这个代码：

<div class = "content-dir-item">
    <p>Text input</p>
    <img src="./images/email.png" class = "mail" alt="img-mail" />
</div>

我会使用 css 将 img 与文本内联。我该怎么做？

【问题讨论】：

标签： html css

【解决方案1】：

图片默认有display: inline。
您可能希望将图片放在段落中。
<p><img /></p>

【讨论】：

【解决方案2】：

请使用以下代码内联显示图像：

<img style='vertical-align:middle;' src='somefolder/icon.gif'>
<div style='vertical-align:middle; display:inline;'>
Your text here
</div>

【讨论】：

【解决方案3】：

这应该显示内联图像：

.content-dir-item img.mail {
    display: inline-block;
    *display: inline; /* for older IE */
    *zoom: 1; /* for older IE */
}

【讨论】：