Use position relative inside display:table-cell in Firefox. Wrapper solution prevent vertical align : middle

Question

I'm using this code on Chrome and ie :

<div id="infobox_mainpic" class="DetailsMainPic" align="center" valign="middle">
   <img src="pictures/3a8ca06d8d51e76243f3d4efdc710d72.jpg" onerror="this.src='css/noload.png';">
   <div class="mainPicArrowLeftDetails" onclick="return NextPic(this,-1);"></div>
   <div class="mainPicArrowRightDetails" onclick="return NextPic(this,1);"></div>
</div>

the main div (infobox_mainpic) has fixed dimension 600px*450px. My purpose is to center vertically and horizontally the img inside. Note that all image can't be wider than 600px and higher than 450px (i have a treatement).

The two div "mainpic..." are supposed to be position absolutely from the top of the main div like on this picture

To achieve this, I used on the infobox_mainpic

display : table-cell;
vertical-align : middle;
text-align:center;
position : relative;

And on the arrows, i use

position : absolute;
top : 130px;

This works on Chrome and IE. The problem is that position relative doesn't work on Firefox. I tried to wrap everything inside a div and apply the position : relative but now, the arrows are not starting from the top of the main div but from the top of the image. If I set width and height to 100% for the wrapper div , then the image is not vertically aligned...

Do you see a solution ?

Answer 1

After some tests, I have found a solution.

instead of putting the div wrapper inside infobox_mainpic, I put infobox_mainpic inside aa div with a relative position. This way, the arrows are correctly positioned and the img is still inside the table-cell div so it is correctly centered.

Answer 2

use d isplay:inline-block instead table-cell . relative positionning will not bug anymore.

Set line-height equal to height of your boxe and img as vertical-align:middle;

arrows could be standing outside the box. inline-block as well and vertical-align:middle; so they stand aside and at middle center of the box.At this point , position:absolute is not necessarry anymore.

demo http://codepen.io/gcyrillus/pen/iAlms

going offline

Answer 3

This works on Chrome and IE. The problem is that position relative doesn't work on Firefox.

I think that's because firefox is still following the CSS 2.1 specs for this,

"The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined."

Although that has changed in CSS 3, it seems it's still to early to rely on that.