title: Use position relative inside display:table-cell in Firefox. Wrapper solution prevent vertical align : middle
body: <p>I'm using this code on Chrome and ie :</p>
  
  <pre><code>&lt;div id="infobox_mainpic" class="DetailsMainPic" align="center" valign="middle"&gt;
     &lt;img src="pictures/3a8ca06d8d51e76243f3d4efdc710d72.jpg" onerror="this.src='css/noload.png';"&gt;
     &lt;div class="mainPicArrowLeftDetails" onclick="return NextPic(this,-1);"&gt;&lt;/div&gt;
     &lt;div class="mainPicArrowRightDetails" onclick="return NextPic(this,1);"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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).</p>
  
  <p>The two div "mainpic..." are supposed to be position absolutely from the top of the main div like on this picture</p>
  
  <p><img src="https://i.stack.imgur.com/u5SV3.png" alt="enter image description here"></p>
  
  <p>To achieve this, I used on the infobox_mainpic</p>
  
  <pre><code>display : table-cell;
  vertical-align : middle;
  text-align:center;
  position : relative;
  </code></pre>
  
  <p>And on the arrows, i use </p>
  
  <pre><code>position : absolute;
  top : 130px;
  </code></pre>
  
  <p>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 <code>position : relative</code> 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...</p>
  
  <p>Do you see a solution ?</p>