wake-up-neo.com

Bild in Bootstrap zentrieren

Ich verwende Bootstrap 3.0 zum Erstellen einer Website. Ich bin neu im Bootstrap. was ich will, ich möchte ein Bild in der Mitte von div, wenn die Browsergröße extra klein ist. Ich habe diesen Code.

<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>
32
Love Trivedi

Update 2018

Bootstrap 2.x

Sie können eine neue CSS-Klasse erstellen, z.

.img-center {margin:0 auto;}

Und dann füge dies zu jedem IMG hinzu:

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

ODER, überschreiben Sie einfach den .img-responsive, wenn Sie alle Bilder zentrieren möchten.

 .img-responsive {margin:0 auto;}

Demo: http://bootply.com/86123

Bootstrap 3.x

EDIT - Mit der Veröffentlichung von Bootstrap 3.0.1 kann die center-block-Klasse jetzt ohne zusätzliches CSS verwendet werden.

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

Bootstrap 4

In Bootstrap 4 kann die mx-auto-Klasse (automatische Ränder der x-Achse) verwendet werden, um Bilder mit display:block zu zentrieren. Img ist jedoch standardmäßig display:inline, sodass text-center für das übergeordnete Element verwendet werden kann.

<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 - Mitte Image Demo

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

sie können wie oben genannten Code in Ihr Dokument schreiben, sodass Sie keine weitere Klasse in image tag hinzufügen müssen.

1
shiyani suresh