Use Position Relative Inside Display:table-cell In Firefox. Wrapper Solution Prevent Vertical Align : Middle

I'm using this code on Chrome and ie :

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.

Solution 3:

use display: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

Share