Как вывести текст справа от картиники по центру (вертикальному)?

[mike2003]

Есть DIV с содержанием content, куда выводится картинка FLOAT:Left, рядом идет текст сообщения, но очень хочется его отцентрировать вертикально. Ничего не получается! Перебрал кучу методов, все либо рассчитаны на точное знание высоты и высчитывание пикселей и сдвигов, либо просто не работают с много строчным текстом.
Есть ли какой метод кроме таблицы? на CSS?


Пробовал display: flex; вроде неплохо, но он не держит параметр max-width
Помогите советом Уже несколько часов бъюсь и ничего не выходит! Ни одного работающего нормального метода не нашел

[Татьяна5]

float убрать, картинке vertical-align: middle;, div'у display: inline-block;

[mike2003]

картинке vertical-align: middle;, div'у display: inline-block;

это не работает с несколькими строками - вторая уходит сразу под картинку.

[Sumanai]

Пробовал display: flex; вроде неплохо, но он не держит параметр max-width

Там есть свои средства управления шириной.

[Татьяна5]

Обернуть все строки в один блок

[mike2003]

в один блок

что это значит?

Код: Выделить всё

<span style="display: block;">

не помогает

Отправлено спустя 11 минут 5 секунд:
вот пример
http://codepen.io/anon/pen/QNJQWK
два стиля картинок нужно для разных страниц

[Татьяна5]

inline-block

[mike2003]

не работает http://codepen.io/anon/pen/WwYMwo

[Татьяна5]

В css комментируют не так

Код: Выделить всё

/*	float: left; */

И width: 200px; там почему-то мешает

Отправлено спустя 19 минут 43 секунды:
Так, поняла в чём дело
Тогда такой вариант:

Код: Выделить всё

.itemman img,  .itemman span {
 display: inline-block;
 vertical-align: middle;
}

div.itemman:before { 
  content: "";
  display: inline-block;
  min-height: inherit;
  vertical-align: middle;
}

.itemman span {
 margin-right: -210px; /* Без знания максимальной ширины картинки не обошлось */
 width: calc(100% - 210px);
}

[mike2003]

100% - 210px

Я пока остановился на DIV http://codepen.io/anon/pen/VaVRZv
Вроде неплохо, но как зритель я вижу несколько недостатков:

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

Но при этом на узком экране это не должно пересекаться. Текст то растет, но картинка не должна вытеснять. Вообщем баланс высоты и ширины нужен.
Когда смотришь на дизайн - понимаешь что нужно, а объяснить трудно.

[Sumanai]

mike2003, тут только флексбоксы помогут.