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!!
精彩评论