Twitter Bootstrap-要素を水平または垂直に中央揃えする方法

285

メインの親の内側に垂直方向または水平方向にHTML要素を中央揃えにする方法はありますか？

css  twitter-bootstrap 
— それは私です
ソース
2
これは、水平方向と垂直方向の
— 中央揃え
2
私も水平方向の配置の問題に直面していました。私は単に<center></center>タグを使用しました
— Utpal-Ur Best Pal 2016年
4
@ Utpal-UrBestPal <center>タグは約12年前に廃止されました。
— Niels Keurentjes

回答:

246

更新：この回答は2013年の初めには正しかったようですが、今後は使用しないでください。適切なソリューションはオフセットを使用します。

他のユーザーの提案として、次のようなネイティブブートストラップクラスも利用できます。

class="text-center"
class="pagination-centered"

@Henningと@trejderに感謝

— それは私です
ソース
22
まったく同じスタイルがBootstrapにすでに含まれています。使用するだけclass="text-center"
— ヘニング2013年
3
または.pagination-centered代替として。
— trejder 2013年
7
これが答えになるはずです。他のものは、質問の「ブートストラップ中」の部分全体を無視します。
— Ryan McDonough 2013
1
@RyanMcDonoughええ、これは効果的にこれが他のすべての人が提案したことを推測するので、私は答えとしてチェックしましたok？
— itsme 2013
1
text-centerレイアウトに使用することは非常に悪い習慣です。Bootstrapで列を整列させる適切な方法は、col-XX-offset-Yクラスを使用することです。getbootstrap.com/css/#grid-offsetting。この回答は2013年に正しかったと思われますが、現在は使用しないでください。
— Niels Keurentjes
55

この質問への将来の訪問者のために：

div内で画像を中央に配置しようとしているが、画像が中央に配置されない場合、これは問題を説明している可能性があります。

問題のjsFiddleデモ

<div class="col-sm-4 text-center">
    <img class="img-responsive text-center" src="myPic.jpg" />
</div>

img-responsiveクラスは、追加display:block停止イメージタグに命令text-align:center（text-center作業からクラス）。

解決：

<div class="col-sm-4">
    <img class="img-responsive center-block" src="myPic.jpg" />
</div>

jsFiddle of the solution

center-blockクラスを追加すると、クラスdisplay:blockを使用して入力された命令がオーバーライドされますimg-responsive。

なければimg-responsive、クラス、画像を追加することによって、ちょうど中央うtext-centerクラスを

更新：

また、Bootstrap4はネイティブで使用するようになったため、フレックスボックスの基本とその使用方法を知っている必要があります。

これは、Brad Schiffによる、ペースの速い優れたビデオチュートリアルです

ここに素晴らしいチートシートがあります

— cssyphus
ソース
32

2018年更新

ではブートストラップ4、芯出しの方法が変更されています。..

BS4の水平中心

  • text-centerまだdisplay:inline要素に使用されています
  • mx-autocenter-block中央のdisplay:flex子供に代わる
  • offset-* または mx-autoグリッド列を中央に配置するために使用できます

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

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

BS4の垂直方向の中央揃えについては、 https：//stackoverflow.com/a/41464397/171456を参照してください

— ジム
ソース
30

次のようにcssファイルに直接書き込むことができます： 

.content {
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  }
<div class = "content" >
  
   <p> some text </p>
  </div>
スニペットを展開

— kirgiz_jigit
ソース
9

私はこれを使います 

<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0 0;
    }

    .container-fluid {
        height: 100%;
        display: table;
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    .row-fluid {
        height: 100%;
        display: table-cell;
        vertical-align: middle;
        width: 100%;
    }

    .centering {
        float: none;
        margin: 0 auto;
    }
</style>
<body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="offset3 span6 centering">
                content here
            </div>
        </div>
    </div>
</body>
— アタバク
ソース
1
特定のケースでの作業は（見ていない、本質的に同じ答えにコメントをしての使用がありませんセンタリングするためのブートストラップ固有のクラスを。
— ダンDascalescu
7

水平方向の中央揃えには、次のようなものを使用できます。

.centering{
float:none;
margin:0 auto
}

 <div class="span8 centering"></div>
— ペルシャ人
ソース
4
画像で直接使用した場合、（少なくとも現在の実装では）機能しません<img src="img/logo.png" style="float:none; margin:0 auto" />。周囲のimg親とdivして与える.text-centerか、.pagination-centered親にクラスは、魔法のように動作します。
— trejder 2013年
2
margin：0 autoで要素を中央に配置するには、その要素に幅を追加する必要があります。上記の例では、span8にはboobstrapの幅があるため、幅は指定されていませんが、画像にはありません<img src = "img / logo.png" style = "float：none; margin：0 auto; width：300px" />は、親の内側でその画像を水平方向に中央揃えにします
— Raul
2
これは、質問の「ブートストラップ」の部分を無視します。
— Dan Dascalescu、2014年
5

私は同様の質問からこの解決策が好きです。https://stackoverflow.com/a/25036303/2364401text-center実際のテーブルデータ<td>とテーブルヘッダー<th>要素でブートストラップクラスを使用します。そう

<td class="text-center">Cell data</td>

そして

<th class="text-center">Header cell data</th>

— ザンダーミラー
ソース
5

ブートストラップ4を使用すると、フレックスを使用できます

<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>

ソース：ブートストラップ4.1

— アルシーク
ソース
3

ブートストラップ4 + Flexはこれを解決します

あなたは使うことができます 

<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>
スニペットを展開

セントと水平を中心に配置する必要があります

— タウフィチャイタリ
ソース
0

私はBootstrap 4でこれを行うことができることを発見しました：

中央の水平は確かにtext-centerクラスです

中央を垂直にしますが、ブートストラップクラスを使用mb-auto mt-autoすると、マージンの上部とマージンの下部が自動に設定されるように両方が追加されます。

— オンライントーマス
ソース
0

いくつかのアイテムのbootstrap4垂直中央用

フレックスルールのd-flex

アイテムの垂直方向のフレックス列

正当化-コンテンツセンターのセンタリングのために

style = 'height：300px;' 中心を計算するか、h-100クラスを使用する設定ポイントが必要です

<div class="d-flex flex-column justify-content-center bg-secondary" style="
    height: 300px;
">
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-primary">Flex item</div>
  </div>
— ラミル・ギルファノフ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.