如何使用灵活的布局将元素集中在Windows 8 [HTML5/JS/CSS3]上

Question

我正在使用HTML5构建Windows 8应用程序,我正试图将我的应用程序菜单放在屏幕中间.我知道有新的CSS3来应用这个功能,通过使用灵活的盒子,但我无法重新创建它.这是我的HTML

<body>
<div id="playControl">
    <button>Back</button>
    <button>Play</button>
    <button>Forward</button>
</div>
</body>

这里有一些信息,但看起来不正常(我猜他们改变了属性名称)

谢谢

Answer 1

我就是这样做的.我根本不使用网格而是使用flexbox.假设你的div在一个叫做"父母"的div里面.我会用......

#parent {
    display:-ms-grid;
    -ms-grid-columns:1fr;
    -ms-grid-rows:1fr;
    height:100%;
}

然后你的div我会用...

#yourDiv {
    -ms-grid-column-align: center;
    -ms-grid-row-align: center;
}

请注意,您需要为父div提供单行和列,高度为100%.然后你需要设置子div的对齐方式(初始值为'stretch').希望有所帮助.