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

У меня есть изображение и текст внутри div, и я хотел бы поместить изображение и текст в вертикальный центр div с помощью CSS. Проблема в том, что я не знаю, сколько строк текста у меня будет, но текст и изображение должны быть ВСЕГДА посередине. Например, когда есть только одна строка текста, div должен выглядеть так:

#################################### # _______ # # | | # # | | # # | IMAGE | text text text # # | | # # |_______| # # # #################################### 

Если в конце концов у меня больше строк или высота текста больше высоты изображения, тогда изображение должно быть выровнено так:

 #################################### # # # text text text # # _______ text text text # # | | text text text # # | | text text text # # | IMAGE | text text text # # | | text text text # # |_______| text text text # # text text text # # text text text # # # #################################### 

У меня есть проблемы с этим эффектом, есть ли способ, не используя javascript для этого?

Обсервованный Родительский div div, к которому я имею в виду, имеет позицию: relative, поэтому есть еще одна проблема.

Дайте изображению и текстуу вертикальное выравнивание: среднее – текст должен содержаться в элементе, который также отображается: inline. Таким образом, разметка выглядит так:

 
text text text
div { display: table; } img { vertical-align: middle; display: table-cell; } span { vertical-align: middle; display: table-cell; }

должно сработать. Вот пример jsfiddle для демонстрации (отредактированный скрипт, чтобы показать, что все также выровнено по вертикали внутри контейнера).

EDIT: для получения желаемого поведения я рекомендую использовать дополнительные свойства отображения – таблицу для контейнера и таблицы-ячейки для содержащихся элементов. Ссылки на Fiddle были обновлены с изменениями.

EDIT: единственный способ, которым я мог придумать, чтобы заставить его работать, – это обернуть изображение в другой встроенный контейнер, в данном случае промежуток. Я обновил скрипку, чтобы продемонстрировать.

Вы можете попробовать это, например здесь .

CSS:

 div.parent{ border:solid black 1px; display:table; padding:5px; width:100%; margin:5px 0; /* you can change/remove margin */ } div.text{ vertical-align:middle; display:table-cell; text-align:justify; } div.parent .img{ vertical-align:middle; display:table-cell; padding-right:5px; width:50px; /* you can change width */ } div.img img{ width:100%; height:50px; /* you can change height */ vertical-align:middle; } 

HTML:

 
Some Text Some.