img vertical align在colorbox中不起作用

Question

我在父级中使用了line-height属性，在子级中使用了vertical-align：

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

它在body标签内部工作，但是当我尝试将该内容放在一个颜色框中时，图像与顶部对齐，这个规则在绝对定位元素，浮动元素或其他内容中有一些限制吗？

如果有人知道更好的方法来垂直居中（不是顶部：50％）我会很感激

由于

Answer 1

您可以使用 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>

Answer 2

在比较每一种风格（计算与否）后，我删除了de colobox css，但它没有解决问题所以我认为它应该是与HTML相关的东西。最后，我将DOCTYPE从过渡更改为RDFa并且工作正常!!