画像のデッドセンターをブートストラップに合わせる方法

私はブートストラップフレームワークを使用しており、画像を水平方向に中央揃えにしようとしていますが、成功しません。

12グリッドシステムを3つの等しいブロックに分割するなど、さまざまなテクニックを試しました。

<div class="container">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>

ページに対して画像を中央に配置する最も簡単な方法は何ですか？

Twitter Bootstrap v3.0.3には、center-blockというクラスがあります。

センターコンテンツブロック

表示する要素を設定します：ブロックとマージンを介した中央揃え。ミックスインとクラスとして利用できます。

タグにクラスを追加するだけ.center-blockで、imgこのようになります

<div class="container">
  <div class="row">
    <div class="span4"></div>
    <div class="span4"><img class="center-block" src="logo.png" /></div>
    <div class="span4"></div>
  </div>
</div>

Bootstrapでは、CSSスタイルの呼び出し.center-blockがすでにあります

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }

こちらからサンプルをご覧いただけます

これを行う正しい方法は

<div class="row text-center">
  <img ...>
</div>

2018年の更新

このcenter-blockクラスはBootstrap 4には存在しません。Bootstrap 4で画像を中央に配置するには、mx-auto d-block...

<img src="..." class="mx-auto d-block"/>

「center-block」をクラスとしてイメージに追加-追加のCSSは不要

<img src="images/default.jpg" class="center-block img-responsive"/>

Twitterブートストラップには、中心となるクラスがあります：.pagination-centered

それは私にとってはうまくいった：

<div class="row-fluid">
   <div class="span12 pagination-centered"><img src="header.png" alt="header" /></div>
</div>

クラスのcssは次のとおりです。

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

以下を使用できます。上記のBootstrap 3.xをサポートしています。

<img src="..." alt="..." class="img-responsive center-block" />

画像のほかに何もないと仮定するとtext-align: center、img親で使用するのが最善の方法です。

.row .span4 {
    text-align: center;
}

編集する

他の回答で述べたように、ブートストラップCSSクラス.text-centerを親要素に追加できます。これはまったく同じことを行い、v2.3.3とv3の両方で使用できます

私のために働く。使ってみるcenter-block

<div class="container row text-center">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img class="center-block" src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>

私は同じものが必要であり、ここで解決策を見つけました：

https://stackoverflow.com/a/15084576/1140407

<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;
}

ブートストラップのimgクラスでmarginプロパティを使用できます。

.name-of-class .img-responsive { margin: 0 auto; }

ブラウザのバージョンに問題がなければ、新しいHTML5機能を使用できるようです。

HTMLファイル内：

<div class="centerBloc">
  I will be in the center
</div>

そしてCSSファイルで、私たちは書きます：

body .centerBloc {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

そのため、divはブラウザーの完全な中心になる可能性があります。

あなたは使うべきです

<div class="row fluid-img">
  <img class="col-lg-12 col-xs-12" src="src.png">
</div>

.fluid-img {
    margin: 60px auto;
}

@media( min-width: 768px ){
        .fluid-img {
            max-width: 768px;
        }
}
@media screen and (min-width: 768px) {
        .fluid-img {
            padding-left: 0;
            padding-right: 0;
        }
}

justify-content-centerコンテナ内の行にクラスを使用しています。Bootstrap 4で適切に動作します。

<div class="container-fluid">
  <div class="row justify-content-center">
   <img src="logo.png" />
  </div>
</div>

これを作成してSite.cssに追加しました。

.img-responsive-center {
    display: block;
    height: auto;
    max-width: 100%;
    margin-left:auto;
    margin-right:auto;
}

前のソリューションのCSSを次のように変更できます。

.container, .row { text-align: center; }

これにより、親のすべての要素も中央に配置さdivれます。