web-dev-qa-db-ja.com

Twitter Bootstrapを使用して中心的なコンテンツを取得する方法

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

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

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

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

htmlcsstwitter-bootstrap
543
Hoa

これはテキストセンタリングのためのものです（これは質問の内容です）

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

更新：Bootstrap 2.3.0+回答

当初の答えは初期のブートストラップでした。ブートストラップ2.3.0以降、 divにクラス.text-centerを与えることができます。

元の回答（2.3.0以前）

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

671
ScottS

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

ブートストラップ3より前では、CSSクラスpagination-centeredを次のように使用できます。

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

クラスpagination-centeredはすでにbootstrap.css（またはbootstrap.min.css）にあり、唯一の規則があります。

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

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

239
Iurii.K

ここにいる人たちの大半は、テキストの内容だけではなく全体のdivへの道を実際に探していると思います（これは些細なことです…）。

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

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

フィドルのためにここに見てみましょう： http://jsfiddle.net/D2RLR/7788/

150
Flavien Volken

2019を更新-Bootstrap 4

「コンテンツの中心化」とは、さまざまなことを意味する場合があり、Bootstrapの中心化は元の投稿から大きく変わっています。

水平センター

ブートストラップ3

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

デモBootstrap 3水平方向のセンタリング

ブートストラップ4

  • text-centerは引き続きdisplay:inline要素に使用されます
  • mx-autoはcenter-blockをdisplay:block要素の中央に置き換えます
  • offset-*ormx-autoを使用してグリッド列を中央に配置できます
  • rowのjustify-content-centerは、col-*の中央揃えにも使用できます。

mx-auto（自動x軸マージン）は、定義された幅、（display:block、vw、pxなど）を持つdisplay:flexまたは%要素を中央に配置します。 Flexboxはグリッド列でデフォルトで使用されます。したがって、さまざまなflexboxセンタリング方法もあります。

DemoBootstrap 4 Horizo​​ntal Centering

垂直中心

Bootstrap 4はデフォルトでflexboxであるため、次を使用して垂直方向の配置にさまざまなアプローチがあります： auto-margins 、 flexbox utils 、または display utils と一緒に vertical align utils 。最初は「vertical align utils」は明らかなように見えますが、これらはonlyインラインおよびテーブル表示要素で動作します。いくつかのBootstrap 4つの垂直方向の中央揃えオプションがあります。

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-フレックスボックス付き垂直センター：

vertical center grid columns

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-ディスプレイユーティリティを使用した垂直方向の中央：

ブートストラップ4には、 display utils があり、display:table、display:table-cell、display:inlineなどに使用できます。これらは vertical alignment 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>

表示ユーティリティを使用した垂直センターデモ

39
Zim

ブートストラップ3.1.1 divをセンタリングするための.center-blockクラスがあります。 http://getbootstrap.com/css/#helper-classes-center を参照してください。

コンテンツブロックのセンタリング要素をdisplay: blockに設定し、marginを介してセンタリングします。 mixinとクラスとして利用可能です。

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

あるいは、他の人がすでに言っているように、テキストを中央に配置するために.text-centerクラスを使用してください。

36
cornishninja

これを行う最良の方法は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が少なければ少ないほどよいでしょう。

28
tomwolber

2013年2月の時点で、場合によっては、 "span" divに "centered"クラスを追加しています。

<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/ /

12
bjfletcher

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

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

12
PAULDAWG

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/ /

9
ucheng

ブートストラップ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>
8
leonbloy

私の側では、使いやすく覚えやすい新しい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;}

それは良い考えですか？ これに何か良い方法はありますか？

6
Parisiam

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

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

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

どんなテキスト整列ユーティリティクラスでもうまくいくでしょう。ブートストラップは長い間テキストを中央揃えするために.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; }
3
nathanjessen

.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>
3
Praveen Das - PD

応答性（モバイル互換性）を維持しながら情報ブロックをセンタリングするための私の好ましい方法は、あなたがセンタリングしたいコンテンツの前後に2つの空のspan1 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-->
2
Kilizo

Bootstrapバージョン3.1.1以降では、コンテンツを中央揃えにするための最善のクラスは.center-blockヘルパークラスです。

2
Shwan Namiq

あなたは以下のタイプのどれでも使うことができます

  1. 既存のブートストラップクラスtext-centerを使用してください。
  2. カスタムスタイルを追加する、style = "text-align:center"。

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

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

1
Poorna Rao

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

    <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
Black Mamba
<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>

主に容器液を使用しないでください。

1
Talha

必要なdivまたはタグには、text-centerというクラスを使用するだけです。私はそれがうまくいくかもしれないと思います。これはテキストの整列中心のためのブートストラップクラスです。

ここにいくつかのテキスト整列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>
0
shiva krishna

私は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>

結果：

Enter image description here

説明

ブートストラップは、左側に、指定された画面占有率の最初の列を指定します。オフセットまたはプッシュを使用すると、「this」列が「それら」の列数分だけ移動します。オフセットの応答性にはいくつかの問題がありましたが、Pushは最高でした。

0
Pikesh Prasoon

更新2018年：

Bootstrap 4.1.3 では、クラスmx-autoを使用してコンテンツを中央に配置できます。

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

参照： https://getbootstrap.com/docs/4.1/utilities/spacing/#horizo​​ntal-centering

0
LinuxUser

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

.container {
    alignment-adjust: central;
}
0
Ariel