ブートストラップの中央の見出し

89

初めてのTwitter Bootstrap体験です。見出し（h1、h2など）をいくつか追加しましたが、左側に揃えられています。見出しを中央に揃える正しい方法は何ですか？

twitter-bootstrap

— シベリアガイ
ソース

見出しをどのように含んでいますか？pタグのように、または緩いコンテナの内部？

— Andres Ilich

@ AndresIlich、row-fluide内（container-fluide内）

— SiberianGuy

すべての見出しを中央に配置することを検討していますか？それとも少数を選択しますか？

— Andres Ilich

@AndresIlich、私はすべての見出しをデフォルトで中央揃えにしたい

— SiberianGuy

137

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

ブートストラップは、テキストの配置のために3つのcssクラスを追加しました。

— 胡錦濤
ソース

67

中央の見出しの要素でclass = 'text-center'を使用するだけです。

<h2 class="text-center">sample center heading</h2>

左の見出しには要素でclass = 'text-left'を使用し、右の見出しには要素でclass = 'text-right'を使用します。

— サデカン
ソース

27

行のクラス属性で「justify-content-center」を使用するだけです。

<div class="container">
  <div class="row justify-content-center">
    <h1>This is a header</h1>
  </div>
</div>

— ジュフレンチ
ソース

2

なぜこのすべてが複雑なのですか？Sadegh-khanの回答のように<h1 class="text-center">、単純なだけではありませんか？

— Marco Sulla

これを使用すると、text-centerを使用していないブートストラップを使用するときに、ヘッダーをdivに集中させることができます。それは私が目指していた画面の中央にヘッダーを表示させます。

— a.norman

11

あなたのコメントごとに、あなたがしなければならないすべての見出しを中央に揃えるにはtext-align:center、次のようにそれらのすべてに同時に追加するだけです：

CSS

    h1, h2, h3, h4, h5, h6 {
        text-align: center;
    }

— アンドレス・イリッヒ
ソース

本当ですが、Twitterブートストラップを使用する背後にある考えは、可能な限り既存のクラスを使用することです。Hu

— Jinpuの

@Skurpiフレームワークは、プロジェクトで使用できるものに対する提案として機能します。それらは決して与えられたものではありません。ブートストラップですでに指定されているクラスとスタイルを使用する方が簡単ですが、プロジェクトの要件でフレームワークに抜本的な変更を加える必要がある場合は、OPの質問に従って、これらの変更を単に変更するだけの最も簡単な方法よりもフレームワークに大幅な変更を加える必要があります。ルートレベル。本当に必要のないクラスを大量に追加するのではなく、

— Andres Ilich 2013年

@Skurpiさらに、これらの配置クラスは、執筆時点では存在していませんでした。この回答は1歳です。

— Andres Ilich 2013年

Ilichそうです、私がここに到着したとき、この質問の日付を見ていませんでした

— Skurpi 2013年

5

ブートストラップには多くのビルド済みクラスが付属しており、そのうちの1つはですclass="text-left"。必要なときはいつでもこのクラスを呼び出してください。:-)

— Tinsae
ソース