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

Question

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

Answer 1

更新: この回答は 2013 年初頭には正しかった可能性がありますが、今後は使用しないでください。適切な解決策は、次のようにoffsets を使用します。

class="mx-auto"

---

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

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

Answer 2

画像を 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:centertext-center

解決：

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

ソリューションの JSFiddle デモ

クラスを追加すると、クラスを使用して入力された命令がcenter-blockオーバーライドされます。クラスがなければ、クラスを追加するだけでイメージが中心になりますdisplay:blockimg-responsiveimg-responsivetext-center

---

また、Bootstrap 4 でネイティブに使用されるようになったため、 flexboxの基本とその使用方法を知っておく必要があります。

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

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

Answer 3

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

.content {
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  }

<div class = "content" >
  
   <p> some text </p>
  </div>

Answer 4

水平方向のセンタリングには、次のようなものがあります。

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

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

Answer 5

私は同様の質問からこの解決策が好きです:

text-center実際のテーブル データ<td>とテーブル ヘッダー<th>要素でブートストラップのクラスを使用します。そう

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

Answer 6

Bootstrap 4 の flex プロパティの使用は、これを解決します。次のクラスを使用できます。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>

これらのクラスは、コンテンツを水平方向および垂直方向に中央揃えにします。