Comment aligner un point mort d'image avec bootstrap

Question

J'utilise le framework bootstrap et essaye d'obtenir une image centrée horizontalement sans succès.

J'ai essayé différentes techniques telles que la division du système à 12 grilles en trois blocs égaux, par ex.

 <div class="container">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>
 

Quelle est la méthode la plus simple pour centrer une image par rapport à la page?

Answer 1

Twitter Bootstrap v3.0.3 dispose d'une classe: centre-bloc

Centre des blocs de contenu

Définissez un élément pour afficher: bloquer et centre dans la marge. Disponible comme un mixin et de la classe.

Juste besoin d'ajouter une classe "center-block" dans la balise img, ressemble à ceci

<div class="container">
<div class="row">
  <div class="span4"></div>
  <div class="span4"><img class="center-block" src="logo.png" /></div>
  <div class="span4"></div>
</div>

Dans le Bootstrap a déjà de style css appel .centre-bloc

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

Vous pouvez voir un échantillon à partir d' ici

Answer 2

La manière correcte de le faire est

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

Answer 3

Ajouter un "bloc central" à l'image en tant que classe - pas besoin de CSS supplémentaire

 <img src="images/default.jpg" class="center-block img-responsive"/>
 

Answer 4

Le bootstrap de Twitter a une classe centrée sur:

Cela a fonctionné pour moi de faire:

 <div class="row-fluid">
   <div class="span12 pagination-centered"><img src="header.png" alt="header" /></div>
</div>
 

Le css pour la classe est:

 .pagination-centered {
  text-align: center;
}
 

Answer 5

En supposant qu'il n'y ait rien d'autre à côté de l'image, le meilleur moyen est d'utiliser text-align: center dans le parent img :

 .row .span4 {
    text-align: center;
}
 

modifier

Comme mentionné dans les autres réponses, vous pouvez ajouter la classe CSS bootstrap .text-center à l'élément parent. Cela fait exactement la même chose et est disponible à la fois dans v2.3.3 et v3