img vertical align is not working inside a colorbox

I've used the line-height property in the parent and the vertical-align in the child:

<div style="height:500px; line-height:500px">
  <img src="someimage.jpg" style="vertical-align:middl开发者_StackOverflowe" />
</div>

It Works inside the body tag but when I try to put that content inside a colorbox the image aligns to the top, Is there some restriction of this rule inside absolute positioned elements, floated elements or something???

If anyone knows a better way to center an image vertically (not with top:50%) I'd appreciate it

Thanks

You can use display: table-cell but you will have to put another div wrapping the image at this way:

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

After comparing every single style (computed and not) I deleted de colobox css but it didn't solve the problem so I think it should be something related whith the HTML. At the end I changed the DOCTYPE from transitional to RDFa and it worked!!