FlexBoxを使用してBootstrapにセンタリングします

BootstrapでFlexBoxを使用して要素センターリングを実装します。水平センタリング：「justify-content：center;」を使用します。親要素の属性。垂直センタリング：「align-Items：center;」を使用します。および「高さ：100VH;」親要素のプロパティ。その他のオプション：単一の要素の「align-self」属性を設定するか、「マージン：auto;」を使用できます。要素を自動的に整列する属性。

FlexBoxを使用してBootstrapにセンタリングします

Bootstrapでは、FlexBoxは、水平または垂直に要素を中心にするためのさまざまなオプションを提供します。 FlexBoxセンタリング要素を使用することは、シンプルで柔軟です。

水平にセンター

要素を水平に中央に配置するには、次の属性を親要素に追加します。

 <code class="css">justify-content: center;</code>

このプロパティは、親要素内に子要素を水平に配置します。

垂直中心

要素を垂直に中央に配置するには、次の2つのプロパティを組み合わせることができます。

1. align-items: center; ：このプロパティは、親要素内で子供を垂直に配置します。
2. height: 100vh; ：このプロパティは、親要素の高さをウィンドウの高さに設定して、要素が垂直方向に中央にあることを確認します。

その他のオプション

これらの基本オプションに加えて、FlexBoxはセンターリングを制御するための追加のオプションも提供します。

• Align-self：このプロパティにより、親要素の設定をオーバーライドする単一の子要素のアライメントを設定できます。
• マージン：自動：このプロパティは、親要素の端から要素を自動的に整列できます。

例

BootstrapでFlexBoxを使用してテキストを水平および垂直に中心に使用する例を次に示します。

 <code class="html"><div class="d-flex justify-content-center align-items-center" style="height: 100vh;"> <p>居中文本</p> </div></code>

これらのプロパティを使用することにより、Bootstrapに要素の水平および垂直センタリングを簡単に実装できます。

以上がFlexBoxを使用してBootstrapにセンタリングしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。