Horizontalement centre d'une image réactive dans le Bootstrap

Si une image avec .img-responsive classe a moins de largeur que de la largeur du conteneur, puis il s'affiche comme alignés à gauche. L'ajout de .text-center à l'élément parent ne semble pas fonctionner. Voici un exemple:

<div class="col-sm-12 text-center">
  <img src="path/to/image.jpg" alt="Example Image" class="img-responsive" />
</div>
InformationsquelleAutor Jabran Rafique | 2015-05-07
  1. 9

    Si vous voulez vraiment suivre le twitter bootstrap synthax, vous devez utiliser le center-block classe comme expliqué dans la documentation.

    Lien vers la documentation

    Genre de code :

    <img class="center-block" src="something.xxx" alt="xxx">
    • Accepter et l'apprécier. Je me demandais bien comment j'ai pu rater ça quand j'ai rencontré ce problème la première fois il y a quelques mois. J'ai vérifié à partir de WayBack Machine et compris qu'ils ne ajout d'une référence à la présente, en avril de cette année. Ref: web.archive.org/web*/getbootstrap.com/css
    • Il fonctionne comme un charme. J'apprécie cette réponse; il est simple et ne nécessite pas de remplacer le fichier bootstrap.
    • Oui j'ai de la belle n'est-ce pas ? Au lieu de mettre un commentaire comme celui-ci, pourquoi ne pas vous expliquer dans le partage de votre code pourquoi tu dis cela ?
    • J'ai essayé celui-ci à plusieurs reprises au fil des ans, et il ne semble jamais à travailler. Ne fait rien... honteusement, j'ai juste abandonné codée à la main bootstrap pour Wix :O
    InformationsquelleAutor Pimento Web
  2. 4

    C'est parce que .img-responsive class a son CSS display propriété définie à block. L'ajout de .img-responsive { display: inline-block; } utilisateur dans la feuille de style va résoudre le problème en remplaçant la valeur d'origine et l'image s'affiche comme centré.

    Voici le CSS:

    .img-responsive {
  display: inline-block;
}

    Voici HTML:

    <div class="col-sm-12 text-center">
  <img src="path/to/image.jpg" alt="Example image" class="img-responsive" />
</div>
    InformationsquelleAutor Jabran Rafique
  3. 1

    Vous pouvez utiliser text-align bien sur c'est parent de l'élément

    .text-centre {
    text-align: center;
}
    • Cela ne fonctionnera pas. Le text-align doit être ajouté à l'élément parent de l'image réactive.
    • Merci! Mise À Jour De Réponse.
    • Vous êtes à côté de la question, je suppose. text-center classe est déjà là dans l'élément parent, mais il ne travaille pas pour cause: stackoverflow.com/a/30103365/428901
    • Faute d'orthographe dans le nom de la classe
    InformationsquelleAutor Tushar