0

HTML5でWindows8アプリを構築していて、アプリメニューを画面の真ん中に配置しようとしています。フレキシブルボックスを使用してこの機能を適用する新しいCSS3があることは知っていますが、それを再現することはできません。これが私のHTMLです

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

ここにいくつかの情報がありますが、正しく機能していないようです（プロパティ名が変更されたと思います）

ありがとう

4

2 に答える 2

6

これが私がそれをする方法です。フレックスボックスの代わりにグリッドを使用しています。あなたの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」です）。お役に立てば幸いです。

于 2012-12-01T07:35:58.833 に答える
1

ブルートフォースの例...実際の実装ではcssスタイルを使用します...

このようなフレックスボックスでページを埋めることができます...（デフォルトの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グリッドを作成して、中央のセル内に小さなフレックスボックスを配置することもできます。

于 2012-12-01T05:23:35.163 に答える