Bootstrap Jumbotron 内でコンテナを垂直方向の中央に配置するにはどうすればよいですか?

Bootstrap の Jumbotron 内のコンテナの垂直方向の配置

Bootstrap のジャンボトロン内でコンテナの垂直方向の配置を実現するには、レベルに応じてさまざまなアプローチを使用します。ブラウザのサポートが必要です。

The Modern方法

Flexbox の使用

Flexbox をサポートする最新のブラウザの場合、より簡単で一貫したアプローチは、Flexbox レイアウト モデルを使用することです。次の CSS をページに追加すると、

.vertical-center {
  display: flex;
  align-items: center;
}

ジャンボトロン内でコンテナを垂直方向の中央に簡単に配置できます。必ずクラス「.vertical-center」の div でコンテナを囲んでください。

昔ながらの方法

古いブラウザの場合

Flexbox をサポートしていないブラウザの場合, 垂直方向の配置を伴う Web 標準技術では、もう少し労力が必要です。 text-align: center プロパティを利用して、親内で子要素を水平方向に整列させます。最初は「display: none」によって非表示になり、高さが親以下の div 要素を作成します。ここで、目的の要素 (コンテナーなど) でvertical-align を使用して配置を操作します。

.vertical-center {
  text-align: center;
  font: 0/0 a;
}

.vertical-center .hidden-child {
  display: none;
  height: 100%;
}

.vertical-center.aligned .hidden-child {
  display: inline-block;
  vertical-align: middle;
}

コンテナー内に、次の表示を追加します。プロパティとvertical-align: middle;垂直方向のセンタリングを実現します。これには、Flexbox の効果を模倣するための追加のマークアップが含まれることに注意してください。

ブラウザに関する考慮事項

Internet Explorer 8 および 9 はインライン ブロック手法を正しく解釈しないため、代替ソリューションが必要であることに注意してください。

以上がBootstrap Jumbotron 内でコンテナを垂直方向の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。