Twitter Bootstrap でコンテンツを中央に配置するにはどうすればよいですか?

Twitter Bootstrap を使用してコンテンツを中央に配置する方法

Twitter Bootstrap では、特定の要件に応じて異なる方法でコンテンツを中央に配置できます。

センタリングText

テキストを中央に配置するには、.text-center クラスを親コンテナに適用します。 Bootstrap 2.3.0 で導入されたこのクラスにより、テキストの中央揃えを簡単に行うことができます。

<div class="text-center">
  <h1 id="Bootstrap-Starter-Template">Bootstrap Starter Template</h1>
  <p>Example text.</p>
</div>

注:

• 古いバージョンのテキスト配置オプションについては、ブートストラップ (2.3.0 より前) では、text-align: center を .row または .span12 に追加できます。 container.

非テキストコンテンツの代替方法

非テキスト要素 (画像やボタンなど) を中央に配置するには、次のオプションがあります。

• マージン: マージンを追加: 0 自動両側に等しいマージンを作成する要素。
• Float: float: none を設定し、親コンテナに margin: 0 auto を追加します。
• ブートストラップ ユーティリティ クラス: .pull-left、.pull-right、および .center-block を使用します。
• カスタム スタイル: 独自のカスタム スタイルシートでセンタリング ルールを定義します。

特定のニーズと Bootstrap のバージョンに最も適した方法を選択してください。

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