web-dev-qa-db-ja.com

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

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

csstwitter-bootstrap
273
itsme

更新 ：この答えは2013年初頭に正解であった可能性がありますが、もう使用しないでください。適切な解決策 オフセットを使う 。

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

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

@Henningと@trejderに感謝します

232
itsme

ブートストラップのドキュメントから ：

要素をdisplay: blockに設定し、marginを介して中央に配置します。 mixinとクラスとして利用可能です。

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

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

画像をdivの中央に配置しようとしたが画像が中央に配置されない場合は、これが問題の原因となる可能性があります。

問題のjsFiddleデモ

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

img-responsiveクラスはimageタグに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クラスを追加するだけで中央揃えになります。

更新：

また、 flexbox の基本とその使用方法を知っておく必要があります。これは Bootstrap4が現在ネイティブに使用している です。

これは優れた、テンポの速い--- Brad Schiffによるビデオチュートリアル

これは素晴らしいです チートシート

53
cssyphus

2018年更新

Bootstrap 4 では、 centering メソッドが変更されました。

BS4の水平方向の中心

  • text-centerはまだdisplay:inline要素に使用されています
  • mx-autoは、center-blockをdisplay:flexの子を中心に配置するために置き換えます。
  • offset-*ormx-autoはグリッド列を中央揃えにするために使用できます

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

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

BS4の垂直方向のセンタリングについては、 https://stackoverflow.com/a/41464397/171456 を参照してください。

28
Zim

あなたは直接このようにあなたのcssファイルに書くことができます：

.content {
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  }
<div class = "content" >
  
   <p> some text </p>
  </div>
26
kirgiz_jigit

私はこれを使う

<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>
9
atabak

水平方向の中央揃えでは、次のようなものがあります。

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

 <div class="span8 centering"></div>
7
PersianMan

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

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

そして

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

5
xander-miller

ブートストラップ4では、flexを使うことができます

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

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

3
alvseek

bootstrap4 いくつかの項目の垂直方向の中央

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

flex-column アイテムの垂直方向

両端揃え - content-center センタリング用

style = '高さ：300ピクセル;' は、中心が計算式である設定点に対しては h-100 classを使用する必要があります

<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>
0
Ramil Gilfanov

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

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

center vertical ただし、ブートストラップクラスを使用すると、mb-auto mt-autoが追加され、margin-topとmargin bottomがautoに設定されます。

0
Thomas