40

ブートストラップ 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>
4

3 に答える 3

163

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/86123

ブートストラップ 3.x

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

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

ブートストラップ 4

Bootstrap 4 では、mx-autoクラス (auto x-axis margins) を使用して、画像を中央に配置できます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>

Bootsrap 4 - 中央の画像のデモ

于 2013-10-07T16:54:15.633 に答える
1 
.img-responsive {
     margin: 0 auto;
 }

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

于 2016-03-17T18:01:35.820 に答える
-3

これを解決策として使用してください

これは私にとって完璧に機能しました..

<div align="center">
   <img src="">
</div>
于 2016-04-25T06:13:25.650 に答える