-moz-box does not work when child has % width

3
votes

We're using the display:-moz-box/-webkit-box to vertically center a div within another div. If it works when the child div has an absolute width, it is not properly renderer on Firefox when the child's width is just a percentage.

<div style="background:yellow;height:40px;display:-moz-box;-moz-box-pack:center;
-moz-box-align:center;display:-webkit-box;-webkit-box-pack:center;
-webkit-box-align:center">
    <div style="width:70%;background:blue;text-align:center">
        Hello World
    </div>
 </div>

Chrome Chrome OK

Firefox Firefox KO

Here's a fiddle to demonstrate the issue : http://jsfiddle.net/sBdWW/

Any help would be appreciated Cheers

1
cssgoogle-chromefirefoxhtmlvertical-alignment

1 Answers

5
votes

You are using an outdated flexbox specification.