Div 内の 2 つの要素を水平方向および垂直方向の中央に配置するにはどうすればよいですか?

ver div 内の 2 つの要素を水平方向に中央揃え

提供されたコード スニペットでは、div 内の要素を垂直方向に中央揃えにする問題が発生しました。提案されたチュートリアルを使用しても問題は解決しなかったようです。

Flexbox の解決策:

Flexbox プロパティを実装して、div 内で要素を垂直方向と水平方向に整列させます:

.banner {
  display: flex;
  justify-content: center;
  align-items: center;
}

テーブルと配置解決策:

または、CSS テーブルと要素の配置に配置を組み合わせて使用​​することを検討してください:

#container {
  display: table;
  vertical-align: middle;
}

.banner {
  display: table-cell;
}

メソッド選択に関する考慮事項:

2 つのアプローチのどちらかを選択する場合は、次の点を考慮してください。要素:

• シンプルさ: フレックスボックスは、要素を中央に配置するためのより簡潔なコードを提供します。
• ブラウザのサポート: フレックスボックスは、主要なブラウザでサポートされています。一方、テーブルと測位方法にはベンダー プレフィックスが必要な場合があります。互換性。
• 応答性: フレックスボックスは応答性の高いレイアウトをサポートし、要素をさまざまな画面サイズに調整できます。

追加の推奨事項:

• margin: auto プロパティを使用して、要素内の要素を水平方向に中央揃えにします。 Banner.
• .bannerrightinner クラスの上余白を調整して、段落内のテキストが垂直方向の中央に配置されるようにします。

以上がDiv 内の 2 つの要素を水平方向および垂直方向の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。