Image réactive alignée au centre bootstrap 3

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

Si vous utilisez Bootstrap v3.0.1 ou une version ultérieure, vous devez utiliser cette solution à la place. Il ne remplace pas les styles de Bootstrap avec du CSS personnalisé, mais utilise à la place une fonctionnalité Bootstrap.

Ma réponse originale est montrée ci-dessous pour la postérité

C'est une solution agréablement simple. Parce que .img-responsivedepuis Bootstrap déjà défini display: block, vous pouvez utiliser margin: 0 autopour centrer l'image:

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

Il y a de la .center-blockclasse dans Twitter Bootstrap 3 ( depuis la v3.0.1 ), alors utilisez:

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

Ajoutez uniquement la classe center-blockà une image, cela fonctionne également avec Bootstrap 4:

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

Remarque: center-blockfonctionne même lorsqu'il img-responsiveest utilisé

Utilisez simplement la .text-centerclasse si vous utilisez Bootstrap 3.

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

Remarque: cela ne fonctionne pas avec img-responsive

Cela devrait centrer l'image et la rendre réactive.

<img src="..." class="img-responsive" style="margin:0 auto;"/>

Je suggérerais 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;
}

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

Vous pouvez toujours travailler avec img-responsivesans affecter les autres images avec cette classe de style.

Vous pouvez faire précéder cette balise de la section id / div id / class pour définir un ordre dans lequel elle imgest imbriquée. Cette coutume img-responsivene fonctionnera que dans ce domaine.

Supposons que vous ayez une zone HTML définie comme:

<section id="work"> 
    <div class="container">
        <div class="row">
            <img class="img-responsive" src="some_image.jpg">
        </div>
    </div>
</section>

Ensuite, votre CSS peut être:

section#work .img-responsive{
    margin: 0 auto;
}

Remarque: Cette réponse est en relation avec l'impact potentiel de la modification img-responsivedans son ensemble. Bien sûr, center-blockc'est la solution la plus simple.

Essayez ce code, il fonctionnera également pour les petites icônes avec bootstrap 4 car il n'y a pas de classe de bloc central qui soit bootstrap 4, essayez donc cette méthode, cela vous sera utile. Vous pouvez modifier la position de l'image en réglant .col-md-12sur .col-md-8ou .col-md-4, c'est à vous.

<div class="container">
       <div class="row">
          <div class="col-md-12">
            <div class="text-xs-center text-lg-center">
           <img src="" class="img-thumbnail">
           </div>
          </div>
       </div>
  </div>

Essaye ça:

.img-responsive{
    display: block;
    height: auto;
    max-width: 100%;
	  margin:0 auto;
}
.Image{
  background:#ccc;
  padding:30px;
}

<div class="Image">
  <img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg" class="img-responsive" title="Rafique" alt="Rafique">
</div>

Mettez simplement toutes les vignettes des images dans une div ligne / col comme ceci:

<div class="row text-center">
 <div class="col-12">
  # your images here...
 </div>
</div>

et tout ira bien!

Pour ajouter aux réponses déjà données, le fait de le img-responsivecombiner avec img-thumbnailsera défini display: blocksur display: inline block.

<div class="col-md-12 text-center">
    <img class="img-responsive tocenter" />
</div>

.

<style>
   .tocenter {
    margin:0 auto;
    display: inline;
    }
</style>

Vous pouvez le corriger en définissant la marge: 0 auto

ou vous pouvez également utiliser col-md-offset

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<style>
.img-responsive{
margin:0 auto;
}
</style>
<body>

<div class="container">
  <h2>Image</h2>
<div class="row">
<div class="col-md-12">
  <p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>                  
  <img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236"> 
</div>
</div>
</div>

</body>
</html>

La manière la plus exacte appliquée à tous les objets Booostrap utilisant uniquement des classes standard serait de ne pas définir les marges supérieure et inférieure (car l'image peut hériter celles-ci du parent), donc j'utilise toujours:

.text-center .img-responsive {
    margin-left: auto;
    margin-right: auto;
}

J'ai également fait un Gist pour cela, donc si des changements s'appliquent à cause de bugs, la version de mise à jour sera toujours ici: https://gist.github.com/jdrda/09a38bf152dd6a8aff4151c58679cc66

Jusqu'à présent, la meilleure solution à accepter semble être <img class="center-block" ... />. Mais personne n'a dit commentcenter-block fonctionne.

Prenez Bootstrap v3.3.6 par exemple:

.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

La valeur par défaut de dispalyfor <img>est inline. La valeur blockaffichera un élément comme un élément de bloc (comme <p>). Il commence sur une nouvelle ligne et occupe toute la largeur. De cette façon, les deux paramètres de marge permettent à l'image de rester au milieu horizontalement.