Twitter Bootstrapを使用して中央揃えのコンテンツを取得するにはどうすればよいですか？

私は非常に基本的な例に従っています。スターターページとグリッドシステムを使用して、次のことを期待していました。

<div class="row">
  <div class="span12">
    <h1>Bootstrap starter template</h1>
    <p>Example text.</p>
  </div>
</div>

...中央揃えのテキストを生成します。

ただし、それでも左端に表示されます。何が悪いのですか？

これはテキストのセンタリング用です（これが問題でした）

他のタイプのコンテンツについては、Flavienの回答を参照してください。

アップデート：Bootstrap 2.3.0+ Answer

最初の答えは、初期バージョンのブートストラップ用でした。ブートストラップ2.3.0以降では、単純にdivにクラスを指定できます.text-center。

元の回答（2.3.0より前）

あなたは、2つのクラスの1、定義する必要がありrowかspan12とをtext-align: center。http://jsfiddle.net/xKSUH/またはhttp://jsfiddle.net/xKSUH/1/を参照してください

注：これはBootstrap 3で削除されました。

Pre-Bootstrap 3では、次のpagination-centeredようなCSSクラスを使用できます。

<div class="span12 pagination-centered">
    Centered content.
</div>

クラスpagination-centeredはすでにbootstrap.css（またはbootstrap.min.css）にあり、ルールは1つだけです。

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

ブートストラップ2.3.0。クラスを使うだけtext-center

ここにいるほとんどの人は、テキストコンテンツだけではなく、全体divを中央に配置する方法を実際に検索していると思います（これは些細なことです...）。

HTMLで中央揃えにする（text-align：centerを使用する代わりに）2番目の方法は、固定幅と自動マージン（左と右）を持つ要素を持つことです。Bootstrapでは、自動マージンを定義するスタイルは「コンテナ」クラスです。

<div class="container">
    <div class="span12">
        "Centered stuff there"
    </div>
</div>

フィドルについてはこちらをご覧ください：http : //jsfiddle.net/D2RLR/7788/

アップデート2019-ブートストラップ4

「中央揃えのコンテンツ」はさまざまな意味を持ち、Bootstrapの中央揃えは元の投稿から大幅に変更されました。

水平中心

ブートストラップ3

• text-centerdisplay:inline要素に使用されます
• center-blockdisplay:block要素を中央に配置する
• col-*offset-* グリッド列を中央に配置する
• ナビゲーションバーを中央に配置するには、この回答を参照してください

デモブートストラップ3水平センタリング

ブートストラップ4

• text-centerdisplay:inline要素にまだ使用されています
• mx-autocenter-block中央のdisplay:block要素に置き換えます
• offset-* または mx-autoグリッド列を中央に配置するために使用できます
• justify-content-center中にはrowまた、中央に使用することができますcol-*

mx-auto（自動X軸マージン）を中心に説明するdisplay:block又はdisplay:flex持つ要素定義された幅を（、 、%、vw、px等。）。フレックスボックスはデフォルトでグリッド列で使用されるため、さまざまなフレックスボックスのセンタリング方法もあります。

デモブートストラップ4水平センタリング

垂直中心

Bootstrap 4がデフォルトでflexboxになったので、auto- margins、flexbox utils、またはdisplay utilsとvertical align utilsを使用して、垂直方向の配置にさまざまなアプローチがあります。最初は "vertical align utils"は明らかなようですが、これらはインラインおよびテーブル表示要素でのみ機能します。以下は、Bootstrap 4の垂直方向の中央揃えオプションです。

1-自動マージンを使用した垂直中心：

垂直方向に中央揃えするもう1つの方法は、を使用することmy-autoです。これにより、要素がそのコンテナの中央に配置されます。たとえばh-100、行を全高にしmy-auto、col-sm-12列を垂直方向に中央揃えにします。

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

自動マージンデモを使用した垂直中心

my-auto 垂直y軸のマージンを表し、次と同等です。

margin-top: auto;
margin-bottom: auto;

2-Flexboxを備えた垂直中心：

Bootstrap 4 .rowは現在、任意の列でdisplay:flex使用align-self-centerして垂直方向に中央揃えすることができます...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

または、align-items-center全体.rowを使用してcol-*、行のすべてを垂直方向に中央揃えにします...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

垂直中心の高さの異なる柱のデモ

3-Display Utilsを使用した垂直中心：

ブートストラップ4が有する表示utilsのために使用することができるdisplay:table、display:table-cell、display:inline、など。これらを一緒に使用することができる垂直配向utilsの整列インラインに、インラインブロック又はテーブルセル要素。

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

Display Utils デモを使用した垂直中心

Bootstrap 3.1.1には、.center-blockdivを中央揃えするためのクラスがあります。参照：http://getbootstrap.com/css/#helper-classes-centerを。

コンテンツブロックのdisplay: block中央揃え要素をに設定し、を介して中央揃えしmarginます。ミックスインとクラスとして利用できます。

<div class="center-block">...</div>

または、他の人がすでに言ったように、.text-centerクラスを使用してテキストを中央揃えにします。

これを行う最良の方法は、CSSスタイルを定義することです。

.centered-text {
    text-align:center
}    

次に、中央揃えのテキストが必要な場合は、次のように追加します。

<div class="row">
    <div class="span12 centered-text">
        <h1>Bootstrap starter template</h1>
        <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
    </div>
</div>

または、pタグを中央揃えにしたい場合：

<div class="row">
    <div class="span12 centered-text">
        <h1>Bootstrap starter template</h1>
        <p class="centered-text">Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
    </div>
</div>

使用するインラインCSSは少ないほど良いです。

クラス.show-gridは、リンクの例で中央揃えのテキストを適用しています。

あなたはいつでもstyle="text-align:center"あなたの行のdivまたは私が思うだろう他のクラスに追加することができます。

2013年2月の時点で、「centred」クラスを「span」divに追加する場合があります。

<div class="container">
  <div class="row">
    <div class="span9 centred">
      This div will be centred.
    </div>
  </div>
</div>

そしてCSSへ：

[class*="span"].centred {
  margin-left: auto;
  margin-right: auto;
  float: none;
}

この理由は、span * divが左にフロートされるためです。また、「自動マージン」のセンタリング手法は、divがフロートしない場合にのみ機能します。

デモ（JSFiddle）：http ://jsfiddle.net/5RpSh/8/embedded/result/

JSFiddle：http ://jsfiddle.net/5RpSh/8/

Bootstrap 3を使用する場合は、.text-centerという名前の組み込みのCSSクラスもあります。それがあなたの望みです。

<div class="text-left">
    left
</div>

<div class="text-center">
    center
</div>

<div class="text-right">
    right
</div>

jsfiddleの例を参照してください。http://jsfiddle.net/ucheng/Q4Fue/

Bootstrap 2.3にはtext-centerクラスがあります。

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

私の側では、CSSすぐに使える、覚えやすい新しいスタイルを定義します。

.center { text-align: center;}
.left { text-align: left;}
.right { text-align: right;}
.justify { text-align: justify;}
.fleft { float: left;} /*-> similar to .pull-left already existing in bootstrap*/
.fright { float: right;}  /*-> similar to .pull-right already existing in bootstrap*/
.vab { vertical-align: bottom;}
.bold { font-weight: bold;}
.italic { font-style: italic;}

それは良い考えですか？これには良い習慣がありますか？

Bootstrap 2.0以降を使用している場合

これにより、divをページの中央に配置できます。

<div class="row">
    <div class="span4 offset4">
        //your content here gets centered of the page
    </div>
</div>

任意のテキスト配置ユーティリティクラスは、トリックを行います。Bootstrapは.text-center、長い間、テキストの中央揃えにクラスを使用しています。

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

または、独自のユーティリティを作成できます。私が長年見てきたいくつかのバリエーション：

.u-text-center { text-align: center !important; }
.ta-center { text-align: center !important; }
.ta\:c { text-align: center !important; }

で調整する必要があり.spanます。

例：

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span4"></div>
    <!--/span-->
    <div class="span4" align="center">
      <div class="hero-unit" align="center">
        <h3>Sign In</h3>
        <form>
          <div class="input-prepend">
            <span class="add-on"><i class="icon-envelope"></i> </span>
            <input class="span6" type="text" placeholder="Email address">
          </div>
          <div class="input-prepend">
            <span class="add-on"><i class="icon-key"></i> </span>
            <input class="span6" type="password" placeholder="Password">
          </div>
        </form>
      </div>
    </div>
    <!-- /span -->
    <div class="span4"></div>
  </div>
  <!-- /row -->
</div>

応答性（モバイル互換性）を維持しながら情報のブロックspan1を中央に配置するための私の好ましい方法は、中央に配置したいコンテンツの前後に2つの空のdiv を配置することです。

<div class="row-fluid">

    <div class="span1">
    </div>

        <div class="span10">
          <div class="hero-unit">
            <h1>Reading Resources</h1>
            <p>Read here...</p>
          </div>
        </div><!--/span-->

    <div class="span1">
    </div>

</div><!--/row-->

Bootstrapバージョン3.1.1以降の場合、コンテンツを中央に配置するのに最適なクラスは.center-blockヘルパークラスです。

<div class="container">
  <div class="col-md-12 centered">
    <div class="row">
      <div class="col-md-1"></div>
       <div class="col-md-10">
           label
       </div>
      <div class="col-md-1"></div>
    </div>
  </div>
</div>

メインでコンテナ流体を使用しないでください。

センターブロックも上記の回答で言及されていないオプションです

    <div class="center-block" style="width:200px;background-color:#ccc;">...</div>

クラスcenter-blockが行うことはすべて、要素に0 autoのマージンを持つように指示することです。autoは左/右マージンです。ただし、クラスtext-centerまたはcss text-align：centerを除く。親に設定されている場合、要素はこの自動計算を実行するポイントを認識しないため、期待どおりに中央に配置されません。

したがって、text-centerの方が適しています。

以下のタイプのいずれかを使用できます

1. Bootstrapの既存のクラスを使用しtext-centerます。
2. カスタムスタイルを追加しますstyle = "text-align:center"。

3. 列オフセットを使用します。

   例： <div class="col-md-offset-6 col-md-12"></div>

このクラスを作成して、レスポンシブ機能を維持しながら画面サイズに関係なく中央揃えを維持します。

.container {
    alignment-adjust: central;
}

必要なdivまたはタグにクラスtext-centerを使用するだけです。うまくいくと思います。これは、テキストの中央揃えのためのBootstrapクラスです。

ここにいくつかのテキスト整列Bootstrapクラスがあります：

text-left, text-right, text-justify, etc.
<div class="row">
 <div class="col-md-12 text-center">
  <h1>Bootstrap starter template</h1>
  <p>Example text.</p>
 </div>
</div>

私は2つの方法を試しましたが、divを中央に配置することはうまくいきました。どちらの方法でも、すべての画面でdivが整列します。

方法1：プッシュの使用：

<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-push-4 col-md-push-4 col-sm-push-4 col-xs-push-4" style="border-style:solid;border-width:1px">
    <h2>Grievance form</h2> <!-- To center this text, use style="text-align: center" -->
  </div>

方法2：オフセットの使用：

<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-offset-4 col-md-offest-4 col-sm-offest-4 col-xs-offest-4" style="border-style:solid;border-width:1px">
    <h2>Grievance form</h2> <!--to center this text, use style="text-align: center"-->
</div>

結果：

説明

ブートストラップは、指定された画面占有の最初の列を左側に指定します。オフセットまたはプッシュを使用すると、 'this'列が 'those'列だけシフトします。オフセットの反応性に問題がありましたが、プッシュは素晴らしかったです。

2018年更新：

ではブートストラップ4.1.3、コンテンツは、クラスを使用して中心にすることができますmx-auto。

<div class="mx-auto">
  Centered element
</div>

リファレンス：https : //getbootstrap.com/docs/4.1/utilities/spacing/#horizo​​ntal-centering