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

18

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

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

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

Спасибо

Вы забыли; вstyle для тебяimg междуheight а такжеfloat. Maehler
@McFjodor Спасибо, я редактировал это Mosijava
Ну, похоже, изменится, если вы дадитеvertical-align:middle изображать. Я проверил это на Chrome. petrichor

Ваш Ответ

6   ответов
6

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

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

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

Спасибо. Только ваше решение сработало для меня
@ Mosijava - это решение работает только для одной строки текста. Я рад, что решение sandeep сработало для вас (вам, очевидно, не требовалосьfloat на изображении, как ваш предложенный заголовок).
Что, если промежуток имеет 2 строки? Mosijava
1

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

демонстрация

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

10

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/

когда у вас длинный текст, он ломается очень глупо
Это работает для изображений на левой стороне, но не будет работать для изображений, плавающих справа.
Я использую ваш подход, и я удаляю свой поплавок из моего изображения. Но когда я меняюсь<span> содержание чего-то, что длинной 2 строки, вторая строка идет в нижней части изображения Наконец, я добавляюdisplay:inline-block в<span> и это работает! Спасибо Mosijava
Это не будет иметь такой же эффект, какfloat если текст достаточно длинный, чтобы использовать несколько строк.jsfiddle.net/9667cqun
@Mosijava - Использование inline-block у меня не сработало - оно просто помещает все на следующую строку. У вас есть пример этой работы?
1

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

действительно ?, проверитьjsbin.com/owiyuc/edit#html,live
Это не работает для меня Mosijava
0

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

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

Flexbox снова побеждает!

Похожие вопросы