0

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

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

这里有一些信息，但看起来工作不正常（我猜他们更改了属性名称）

谢谢

4

2 回答 2

6

这就是我的做法。我完全使用网格而不是弹性框。假设您的 div 在一个名为“parent”的 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'）。希望有帮助。

于 2012-12-01T07:35:58.833 回答
1

蛮力示例...在实际实现中使用 css 样式...

您可以使用像这样的 flexbox 填充页面......（注意我使用默认的ms-flexbox css 样式来开始工作，并使用内联样式覆盖以获得我想要的内容）

<div class="ms-flexbox" style="width: 100%; height: 100%; -ms-flex-direction: column; -ms-flex-align: center; -ms-flex-pack: center;">
    <button>Back</button>
    <button>Play</button>
    <button>Forward</button>
</div>

或者您可以创建一个 3x3 网格并在中间单元格内放置一个较小的 flexbox。

于 2012-12-01T05:23:35.163 回答