it-swarm.com.ru

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

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

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

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

Спасибо

18
Mosijava

Сначала удалите 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/

10
sandeep

Несмотря на то, что это очень старая запись, вы можете добиться этого с помощью 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>

Пример JsFiddle

9
The Codesee

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

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

Смотрите пример.

6
ScottS

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

1
atmd

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

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

Демо

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

1
huMpty duMpty

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

  div:after {
        content:"";
        clear:both;
        display:block;
    }
0
Franz Fahrenkrog Petermann