Как установить img с текстом

У меня есть этот код:

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

Я бы поставил img inline с текстом, используя css. Как я могу это сделать?

Ответ 1

Изображения имеют display: inline по умолчанию.
Возможно, вы захотите поместить изображение внутри абзаца.
<p><img /></p>

В качестве дополнительной заметки я бы рекомендовал изменить src="./images/email.png" на src="../images/email.png".
Обратите внимание на две точки ../

Ответ 2

Это должно отображать встроенное изображение:

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

Ответ 3

Пожалуйста, используйте приведенный ниже код для отображения встроенного изображения:

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