タイトルを次のように書き換えました: Flexbox を使用した要素の水平方向と垂直方向の中央揃え
P粉748218846
2023-08-20 13:00:18
<p>フレックスボックスを使用してコンテナ内で div を水平方向と垂直方向の中央に配置する方法。以下の例では、各数値を(行ごとに)下中央に配置したいと考えています。 </p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.flex-container {
パディング: 0;
マージン: 0;
リストスタイル: なし;
ディスプレイ: フレックス;
整列項目: 中央;
コンテンツの位置揃え: 中央;
}
行 {
幅: 100%;
}
.flex-item {
背景: トマト。
パディング: 5px;
幅: 200ピクセル;
高さ: 150ピクセル;
マージン: 10px;
行の高さ: 150px;
色: 白;
フォントの太さ: 太字;
フォントサイズ: 3em;
テキスト整列: 中央;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="flex-container">
<div class="行">
<span class="flex-item">1</span>
</div>
<div class="行">
<span class="flex-item">2</span>
</div>
<div class="行">
<span class="flex-item">3</span>
</div>
<div class="行">
<span class="flex-item">4</span>
</div>
</div></pre>
<p><br /></p>
<p>http://codepen.io/anon/pen/zLxBo</p>
Flexbox で要素を垂直方向および水平方向に中央揃えする方法
以下に、2 つの一般的なセンタリング ソリューションを示します。
1 つは垂直方向に整列したフレックス項目 (
flex-direction: column
) 用で、もう 1 つは水平方向に整列したフレックス項目 (flex-direction: row
) 用です。どちらの場合も、中央の div の高さは可変、未定義、不明、重要ではない可能性があります。
以下は両方の HTML コードです:
リーリーCSS (装飾スタイルを除く)
フレックス項目が垂直方向に積み重ねられる場合:
リーリー #########デモ#########フレックス項目が水平方向に積み重ねられる場合:
上記のコードのflex-direction
ルールを調整します。 リーリー #########デモ#########
フレキシブルアイテムのコンテンツを中央に配置します柔軟な書式設定コンテキスト
したがって、子要素に flex プロパティを適用するには、常に display: flex または display: inline-flex
を親要素に適用する必要があります。テキストやその他のコンテンツを垂直方向および/または水平方向に中央揃えにするには、アイテムを (ネストされた) フレックス コンテナーにして、中央揃えルールを繰り返します。
リーリー詳細については、次を参照してください。 フレックスボックスでテキストを垂直方向に配置するにはどうすればよいですか?
あるいは、
自動margin: auto
をフレックス項目のコンテンツ要素に適用することもできます。リーリー
フレックスマージンの詳細については、こちらをご覧ください:
フレックス項目を整列させる方法(ボックス #56 を参照)。
中央に配置された複数行の柔軟な項目フレックス コンテナーに複数の行がある場合 (改行により)、軸をまたがる位置合わせには
align-content仕様より:
flex-wrap は、align-self、align-items、および align-content とどのように連携しますか?
ブラウザのサポート
IE を除くすべての主要なブラウザでサポートされています。 Safari 8 や IE10 などの一部の最近のブラウザ バージョンでは、 ベンダー プレフィックス
が必要です。プレフィックスをすばやく追加するには、Autoprefixer を使用します。詳細については、この回答
を参照してください。CSS テーブルと配置プロパティを使用した代替のセンタリング ソリューションについては、この回答を参照してください: https://stackoverflow.com/a/31977476/3597276
あなたが望んでいることは次のとおりだと思います。