Вертикальное выравнивание текста в div'е

[LMnet]

Возникла проблема при расположении текста внутри блока с картинкой. Вот пример в песочнице. Задача - добиться вертикального выравнивания текста по центру картинки. Причем нужно нормальное решение, которое не зависит от количества текста. В интернете в основном предлагают установить следующий стиль для div'а:

wrap{ display: table-cell; };

Тогда можно будет просто сделать vertical-align: middle и текст будет по центру. Но данное решение мне не подходит, потому что несколько таких элементов последовательно будут отображаться как ячейки в таблице, а мне нужно расположить их друг под другом. Есть какое-нибудь другое решение данной проблемы? Или может применить table-cell и обернуть все это в еще один div, который уже будет блочным?

[SelenIT]

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

[Switch74]

а такой вариант не рассматривали?

[wildhind]

а такой вариант не рассматривали?

А такой вариант не проще ли честно оформить таблицей?

[SelenIT]

А зачем, если от таблицы тут требуется сугубо одна визуальная особенность, и только на широком экране (а на том же мобильнике логичнее пустить текст под картинкой)?

[wildhind]

убедительно.

Теперь я понимаю обоснование предпочтения display:table-cell честным таблицам. Спасибо.

[Switch74]

wildhind

ты тоже против этого css заменителя таблиц

[wildhind]

уже нет

[LMnet]

Большое спасибо, оба варианта подходят! Но мне больше нравится первый, с inline-block'ом, хотя принципиальной разницы нету.