Как центрировать изображение неизвестной/динамической высоты в плавающем div неизвестной/динамической высоты?

Question

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

Итак, у меня есть контейнер/родительский div, а внутри него - левый и правый div. Контейнер растягивается вертикально, чтобы соответствовать большей левой и правой div (обе имеют неизвестную высоту). Левый div перемещается влево и имеет изображение в нем неизвестных размеров, а правый div будет иметь текст (об изображении). По идее, я хочу вертикально центрированное изображение слева внутри его родительского div, а текст - справа. Если есть другие структуры для этого, кроме плавающих (например), я открыт.

Я сделал шаблон ситуации на jsfiddle: http://jsfiddle.net/hoopadoop/GEkaW/

Я пытался отображения: таблицы; с вертикальной выровненностью: middle ;, background: url (image) no-repeat center center ;, и материал с полями. Единственное, что до сих пор работало, - это использовать html <tables>, но я предпочел бы придерживаться CSS.

Возможно, я просто продолжаю получать синтаксис неправильно или что-то глупое, но я не могу заставить ничего работать. Любая помощь очень ценится

Answer 1

чек здесь

http://jsfiddle.net/9PkxA/2/

Я добавил новый класс налево Див "средний" и определить

.middle 
{ 
    margin-top:50%; 
} 

Надеется, что это поможет

Answer 2

Добавление правила margin-top: 50% для тегов img должно сделать изображения приблизительно вертикально центрированными.