web-dev-qa-db-fra.com

Centrer l'image dans Bootstrap

J'utilise bootstrap 3.0 pour créer un site Web. Je suis nouveau pour bootstrap. Ce que je veux, je veux une image au centre de la division lorsque la taille du navigateur est très petite, ce 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>
csstwitter-bootstraptwitter-bootstrap-3bootstrap-4
32
Love Trivedi

Mise à jour 2018

Bootstrap 2.x

Vous pouvez créer une nouvelle classe CSS telle que:

.img-center {margin:0 auto;}

Et ensuite, ajoutez ceci à chaque IMG:

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

OU, remplacez simplement le .img-responsive si vous allez centrer toutes les images.

 .img-responsive {margin:0 auto;}

Démo: http://bootply.com/86123

Bootstrap 3.x

EDIT - Avec la sortie de Bootstrap 3.0.1, la classe center-block peut désormais être utilisée sans CSS supplémentaire.

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

Bootstrap 4

Dans Bootstrap 4, la classe mx-auto (marges de l'axe x automatique) peut être utilisée pour centrer les images qui sont display:block. Cependant, par défaut, img est display:inline afin que text-center puisse être utilisé sur le parent.

<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 - Démo d'image centrale

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

vous pouvez écrire le code ci-dessus dans votre document, donc inutile d’ajouter une autre classe dans la balise image.

1
shiyani suresh