0

下面的代码在 Chrome 版本 22.0.1229.96 m 中无法正确呈现。它在 Firefox 中运行良好。当类应用于 div 时，基本上什么都不会发生，它只是正常渲染所有内容。

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

将类添加到 div 后，输入元素水平对齐。

更新

Flexbox 是要走的路，但 Firefox 仍然不支持它。我已经像这样修改了我的css，它现在可以正常工作。

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

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

1 回答 1

1

也许它在 Chrome 中不受支持：

警告：这是原始 CSS 灵活框布局模块标准的属性，正在被新标准取代。

有关更多信息，请参阅弹性盒。

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

于 2012-10-26T09:48:32.937 回答