ブートストラップでコンテンツを垂直に整列する方法

コンテンツを垂直に中央に配置するには、BootstrapのFlexboxツールクラスを使用する必要があります。1。親コンテナにD-flexとAlign-Item-centerを追加し、容器に明確な高さがあることを確認します。 2。同時に水平に中央に集中する必要がある場合は、Justify-Content-Centerを追加します。 3。完全なビューポートセンターの場合は、Min-Height：100VHを設定します。 4.レスポンシブなプレフィックスを介して、異なる画面の下にアライメントします。重要なのは、親コンテナがFlexBoxを有効にし、高さを設定する必要があることです。この方法は、カスタムCSSのないブートストラップ4および5で適用できます。

利用可能なユーティリティクラスに精通していない場合、ブートストラップに垂直にセンタリングコンテンツが難しい場合があります。良いニュースは、Bootstrap 4と5がFlexBoxを使用して垂直方向のアライメントを簡単にする組み込みクラスを提供することです。

ブートストラップでコンテンツを垂直に整列する方法は次のとおりです。

1. d-flexおよびalign-items-center使用します

コンテナ内のコンテンツを垂直に中心にするには、 d-flex （FlexBoxを使用する要素を設定します）を適用し、 align-items-center （クロス軸に沿って子供を垂直に中心）します。

 <div class = "d-flex align-items-center" style = "height：200px; background：＃f0f0f0;">
  <p>垂直中心コンテンツ</p>
</div>

これは、シングルラインテキスト、ボタン、またはインライン/インラインブロックコンテンツで機能します。

注：親コンテナには、中心を表示するには、定義された高さ（ min-height: 100vh 、 height: 300pxなど）が必要です。

2。垂直と水平の両方の中心

コンテンツを水平に中央に配置したい場合は、 justify-content-centerを追加します。

 <div class = "d-flex align-items-center Justify-content-center" style = "height：200px; background：＃f0f0f0;">
  <p>垂直方向と水平の両方の中心</p>
</div>

これは、ランディングページ、ヒーローセクション、または画面の読み込みに役立ちます。

3.フルビューポートの高さに適用します

ブラウザウィンドウ全体にコンテンツを中央に配置する（スプラッシュ画面または404ページに共通）：

 <div class = "d-flex align-items-center justify-content-center" style = "min-height：100vh;">
  <h1>ようこそ！</h1>
</div>

min-height: 100vhを使用すると、コンテナが少なくともビューポートと同じくらい高くなります。

4。レスポンシブアライメント

応答性のプレフィックスを使用して、応答的にアライメントを制御することもできます。

 <div class = "d-flex align-items-start align-items-md-center Justify-content-center" style = "min-height：100vh;">
  <p>中央画面上で垂直に中央に配置され、</p>
</div>

これにより、アラインメントはさまざまな画面サイズに適応します。

覚えておくべき重要なポイント：

• 常に親コンテナでd-flex使用してください。
• align-items-center垂直アライメントを処理します。
• フレックスコンテナに高さ（ height 、 min-heightなど）を設定します。そうしないと、崩壊し、センターリングは機能しないようです。
• Bootstrap 4および5で一貫して動作します。

基本的に、 d-flex 、 align-items-center 、および定義された高さでは、ブートストラップの垂直アライメントはシンプルで信頼性があります。ほとんどの場合、カスタムCSSは必要ありません。

以上がブートストラップでコンテンツを垂直に整列する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。