Twitter Bootstrap で要素を水平方向と垂直方向の中央に配置する方法は?

Twitter Bootstrap で要素を中央に配置するための包括的なガイド

Twitter Bootstrap を使用する場合、親コンテナ内で要素を垂直または水平に中央に配置する必要がありますが頻繁に発生します。この汎用性の高いフレームワークは、この配置を実現するための複数のアプローチを提供します。

水平方向のセンタリング

1. text-center クラス: text-center を適用します。クラスを親コンテナに追加して、そのコンテンツを水平方向の中央に配置します。これは、テキスト要素とテキスト以外の要素の両方にとってシンプルで効果的な方法です。
2. mx-auto クラス: さらに柔軟性が必要で、センタリングをオフセットしたい場合は、mx-auto を使用します。クラス。要素の左右に自動的にマージンが追加され、要素が中央に寄せられます。

垂直センタリング

ブートストラップには組み込みの機能はありません。垂直方向のセンタリングのためのユーティリティ。ただし、次の 2 つの一般的な手法があります。

1. ページネーション中心のクラス: ページネーション コントロールを使用してコンテナ内の単一要素を垂直方向に中央揃えするには、ページネーション中心のクラスをページネーションに適用します。コントロール ラッパー。
2. カスタム CSS: カスタム CSS を使用して垂直方向に配置することもできます。中心要素。たとえば、中央に配置する要素に margin-top: auto プロパティと margin-bottom: auto プロパティを設定します。

注:

テキスト-center および pagination-centered クラスは、Bootstrap の最近のバージョンでは非推奨になりました。代わりに、mx-auto および d-flex ユーティリティを使用することをお勧めします。

以上がTwitter Bootstrap で要素を水平方向と垂直方向の中央に配置する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。