img Вертикальное выравнивание не работает внутри colorbox

Question

Я использовал свойство line-height в родительском элементе и вертикальное выравнивание в дочернем:

<div style="height:500px; line-height:500px">
  <img src="someimage.jpg" style="vertical-align:middle" />
</div>

Это работает внутри тега body, но когда я пытаюсь поместить это содержимое в палитру цветов, изображение выравнивается по верху. Есть ли какое-то ограничение этого правила внутри элементов с абсолютным позиционированием, плавающих элементов или чего-то подобного ???

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

Спасибо

Answer 1

После сравнения всех стилей (вычисленных и нет) я удалил de colobox css, но это не решило проблему, поэтому я думаю, что это должно быть связано с HTML. В конце я изменил DOCTYPE с переходного на RDFa, и это сработало !!

Answer 2

Вы можете использовать display: table-cell , но вам нужно будет поместить еще один div, обертывающий изображение таким образом:

<div style="display: table-row; height: 500px;">
 <div style="display: table-cell; vertical-align: middle;">
  <img src="someimage.jpg"/>
 </div>
</div>