Question

The code below is not rendering properly in Chrome version 22.0.1229.96 m. It’s working fine in Firefox. Basically nothing is happening when class is applied to a div, it’s just renders everything normally.

.vbox {
    display: -moz-box;
    -moz-box-orient: vertical;

    display: -webkit-box;
    -webkit-box-orient: vertical;

    display: box;
    box-orient: vertical;
}

<div class="vbox">
    <input type="text" />
    <input type="password" />
</div>

Input elements are aligned horizontally after adding class to a div.

Update

Flexbox is the way to go but Firefox is still not supporting this. I have modified my css like this and it’s working properly for now.

.vbox {
    display: -moz-box;
    -moz-box-orient: vertical;

    display: -webkit-flex;
    -webkit-flex-direction: column; 
    -webkit-justify-content: center;
    -webkit-align-items: center;
}

Answer 1

Maybe it’s just not supported in Chrome:

Warning: This is a property of the original CSS Flexible Box Layout Module standard which is being replaced by a new standard.

See Flexbox for more information.

https://developer.mozilla.org/en-US/docs/CSS/box-orient