html - 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 a a 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.