Twitter Bootstrap で要素を中央に配置するにはどうすればよいですか?

Twitter Bootstrap で要素を中央に配置する

Twitter Bootstrap を使用する場合、親コンテナ内の要素を中央に配置する必要があります。使用できる方法は次のとおりです:

水平方向の中央揃え:

1. text-center クラス: 親コンテナの text-center クラスを使用して、すべての子要素を水平に配置します。

2.インライン スタイル: 親コンテナまたは中央に配置する子要素に text-align: center CSS プロパティを設定します。

3.オフセット (新しいメソッド): Bootstrap 4 で導入された mx-auto クラスは、要素に水平方向のマージンを追加し、要素を中央に配置します。

垂直センタリング:

1. padding-top および padding-bottom: 親コンテナーの padding-top プロパティと padding-bottom プロパティを使用して、垂直方向の間隔を追加し、子要素を中央揃えにします。

2.絶対配置: 子要素を絶対的に配置し、先頭を 50% に設定します。そして、transform:translate(-50%, -50%).

注: 上記の解決策は、古いバージョンの Bootstrap に適用できます。 Bootstrap 4 以降では、mx-auto クラスが水平方向のセンタリングに推奨されるアプローチです。

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