web-dev-qa-db-ja.com

Bootstrapの画像の中央揃え

bootstrap 3.0を使用してWebサイトを作成しています。ブートストラップは初めてです。私が欲しいもの、ブラウザのサイズが非常に小さいときにdivの中心に画像が欲しいのですが、このコードがあります。

<div class="col-lg-10 ccol-lg-offset-1 col-md-12 col-sm-12 ">
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
        <img src="images/2.png" class="img-responsive" />
        <p class="text-center"><a href="javascript:void(0);">Taj Group</a></p>
    </div>
    <div class="col-lg-2  col-md-2 col-sm-2 col-xs-12">
        <img src="images/2.png" class="img-responsive" />
        <p class="text-center"><a href="javascript:void(0);">Taj Group</a></p>
    </div>
    <div class="col-lg-2  col-md-2 col-sm-2 col-xs-12">
        <img src="images/2.png" class="img-responsive" />
        <p class="text-center"><a href="javascript:void(0);">Taj Group</a></p>
    </div>
    <div class="col-lg-2  col-md-2 col-sm-2 col-xs-12">
        <img src="images/2.png" class="img-responsive" />
        <p class="text-center"><a href="javascript:void(0);">Taj Group</a></p>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
        <img src="images/2.png" class="img-responsive" />
        <p class="text-center"><a href="javascript:void(0);">Taj Group</a></p>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
        <img src="images/2.png" class="img-responsive" />
        <p class="text-center"><a href="javascript:void(0);">Taj Group</a></p>
    </div>
csstwitter-bootstraptwitter-bootstrap-3bootstrap-4
34
Love Trivedi

更新2018

ブートストラップ2.x

次のような新しいCSSクラスを作成できます。

.img-center {margin:0 auto;}

そして、これを各IMGに追加します。

 <img src="images/2.png" class="img-responsive img-center">

または、すべての画像を中央に配置する場合は、.img-responsiveをオーバーライドします。

 .img-responsive {margin:0 auto;}

デモ：http://bootply.com/8612

ブートストラップ3.x

EDIT-Bootstrap 3.0.1のリリースでは、 center-blockクラスは、追加のCSSなしで使用できるようになりました。

 <img src="images/2.png" class="img-responsive center-block">

ブートストラップ4

Bootstrap 4では、mx-autoクラス（自動x軸マージン）を使用して、display:blockである画像を中央に配置できます。ただし、imgはデフォルトでdisplay:inlineであるため、親でtext-centerを使用できます。

<div class="container">
    <div class="row">
        <div class="col-12">
            <img class="mx-auto d-block" src="//placehold.it/200">  
        </div>
    </div>
    <div class="row">
        <div class="col-12 text-center">
            <img src="//placehold.it/200">  
        </div>
    </div>
</div>

ブートストラップ4-中央の画像デモ

139
Zim
.img-responsive {
     margin: 0 auto;
 }

上記のコードのようにドキュメントに記述できるため、イメージタグに別のクラスを追加する必要はありません。

1
shiyani suresh