Image réactive aligner le centre bootstrap 3

Question

Je fais un catalogue en utilisant Bootstrap 3. Lorsqu'elles sont affichées sur des tablettes, les images des produits ont l'air moche à cause de leur petite taille (500x500) et une largeur de 767 pixels dans le navigateur. Je veux mettre l'image au centre de l'écran, mais pour une raison que je ne peux pas. Qui sera aidera à résoudre le problème?

Vous pouvez voir un exemple en direct ici .

Answer 1

Il y a .center-block classe dans Twitter Bootstrap 3 ( Since v3.0.1 ), alors utilisez:

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

Answer 2

C'est une solution agréablement facile. Parce que .img-responsive de Bootstrap définit déjà display: block , vous pouvez utiliser margin: 0 auto pour centrer l'image:

 .product .img-responsive {
    margin: 0 auto;
}
 

Answer 3

Utilisez simplement .text-center class si vous utilisez Bootstrap 3.

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

Démo: Fiddle

Answer 4

Je proposerais une classification plus "abstraite". Ajoutez une nouvelle classe "img-center" qui peut être utilisée en combinaison avec la classe .img-responsive:

 // Center responsive images
.img-responsive.img-center {
  margin: 0 auto;
}
 

Answer 5

@media (max-width: 767px) {
   img {
     display: table;
     margin: 0 auto;
   }
}