Обтекание текста под IMG вертикальное выравнивание: середина не работает

Question

Я получаю неожиданные результаты при использовании выравнивания по вертикали на изображении с сопровождающим текстом.Если текст шире контейнера, он оборачивается ПОД изображением, а не просто переносится на следующую строку:

альтернативный текст http://preview.moveable.com/jm/verticalalign.png

Мой HTML прост:

<ul>
   <li><img .../> some text </li>
   ...
</ul>

• У меня есть высота и overflow-y:scroll на UL (вероятно, не имеет значения)
• У меня установлена ​​высота на LI, которая достаточно велика дляизображение заполнителя и интервал.
• У меня есть vertical-align:middle на изображении, чтобы получить текст в нужном месте, почти
• Остальные поля и границы
• Am amНЕ использовать поплавки

Как я могу заставить текст обернуться правильно, желательно без дополнительной разметки?

Answer 1

Если изображение статичное, я бы использовал фоновое изображение на li, а затем просто добавил левый отступ, чтобы обеспечить правильный интервал

  li {
      background: url(/images/foo.jpg) center left no-repeat;
      padding-left: barpx;
  }

Вы также можете использовать поле li, чтобы оставить интервал слева от изображения внутри ul

если изображения разные, я бы просто применил класс для каждого li, чтобы различить разницу

редактировать для SEO дружелюбия:

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

  li img {
     display:none
  }

Answer 2

Как указывал @graphicdivine, есть два способа интерпретировать слова "правильно". Если вы хотите, чтобы вещи занимали все пространство вокруг изображения, я бы сделал то, что он предложил: используйте float: left; на изображении.

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

<li style="display: table-row;">
<img src="..." style="vertical-align: middle; display: table-cell;" />
<span style="display: table-cell;">...</span>
</li>

Тот же отказ от ответственности, как и раньше: это не хорошо в IE. Кроме того, это нарушает ваше правило «не более разметки», хотя я не уверен, как вы хотели достичь другого результата без внесения изменений. Возможно, я вас не правильно понял.

Answer 3

Мне кажется, вы можете всплыть на левом изображении.