开发者

img vertical align is not working inside a colorbox

开发者 https://www.devze.com 2023-04-04 01:12 出处:网络
I\'ve used the line-height property in the parent and the vertical-align in the child: <div style=\"height:500px; line-height:500px\">

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!!

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号