Как вертикально выравнивать текст рядом с плавающим изображением?

Я хочу вертикально выровнять диапазон после плавающего изображения. Я искал его в переполнении стека и нашел этот пост. но мое изображение плавает.

<div>
    <img style="width:30px;height:30px; float:left">
    <span style="vertical-align:middle">Doesn't work.</span>
</div>

Я даю vertical-align:middle изображению и ничего не меняется!

Спасибо

Ответ 1

Сначала удалите float из него. Напишите вот так:

<img style="width:30px;height:30px;vertical-align:middle" src="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg">
    <span>Doesn't work.</span>

Отметьте http://jsfiddle.net/ws3Uf/

Ответ 2

Добавить line-height (равный высоте изображения):

<div>
    <img style="width:30px;height:30px; float:left">
    <span style="vertical-align:middle; line-height: 30px;">Works!</span>
</div>

См. пример.

Ответ 3

Несмотря на то, что это очень старый пост, вы можете достичь этого, используя Flexbox:

div {
 display: flex;
 align-items: center;
}

<div>
<img style="width:30px;height:30px;" src="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg" />
<span>Doesn't work.</span>
</div>

Ответ 4

A <span> является встроенным элементом, попробуйте добавить display:block к span, придайте ему ту же высоту, что и изображение, и высоту строки, чтобы соответствовать. Поплавок тоже ушел. Это должно работать

Ответ 5

Вы также можете изменить вручную

<div>
    <img style="width:30px;height:30px float:left">
    <span style="float:left;padding-top:15px;">Will work.</span>
</div>

Демо

Или вы можете использовать таблицу

Ответ 6

Вы можете сделать следующее:

  div:after {
        content:"";
        clear:both;
        display:block;
    }