Comment aligner un point mort d'image avec bootstrap

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

J'ai essayé diverses techniques telles que la division du système à 12 grilles en 3 blocs égaux, par exemple

<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?

Twitter Bootstrap v3.0.3 a une classe: bloc central

Blocs de contenu du centre

Définissez un élément à afficher: bloquer et centrer via la marge. Disponible en mixin et en classe.

Il suffit d'ajouter une classe .center-blockdans la imgbalise, 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>
</div>

Dans Bootstrap a déjà un appel de style CSS .center-block

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

Vous pouvez voir un échantillon d' ici

La bonne façon de procéder est

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

Mise à jour 2018

La center-blockclasse n'existe plus dans Bootstrap 4 . Pour centrer une image dans Bootstrap 4, utilisez mx-auto d-block...

<img src="..." class="mx-auto d-block"/>

Ajoutez le «bloc central» à l'image en tant que classe - aucun CSS supplémentaire n'est requis

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

Twitter bootstrap a une classe qui se centre: centrée sur la pagination

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;
}

Vous pouvez utiliser ce qui suit. Il prend en charge Bootstrap 3.x ci-dessus.

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

En supposant qu'il n'y a rien d'autre à côté de l'image, la meilleure façon est d'utiliser text-align: centerdans le imgparent:

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

Éditer

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

Travaille pour moi. essayez d'utilisercenter-block

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

J'ai besoin de la même chose et j'ai trouvé la solution:

https://stackoverflow.com/a/15084576/1140407

<div class="container">
  <div class="row">
    <div class="span9 centred">
      This div will be centred.
    </div>
  </div>
</div>

et au CSS:

[class*="span"].centred {
  margin-left: auto;
  margin-right: auto;
  float: none;
}

Vous pouvez utiliser la propriété margin avec la classe bootstrap img.

.name-of-class .img-responsive { margin: 0 auto; }

Il semble que nous pourrions utiliser une nouvelle fonctionnalité HTML5 si la version du navigateur n'est pas un problème:

dans les fichiers HTML:

<div class="centerBloc">
  I will be in the center
</div>

Et en fichier CSS, on écrit:

body .centerBloc {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Et donc le div pourrait être parfaitement centré dans le navigateur.

Tu devrais utiliser

<div class="row fluid-img">
  <img class="col-lg-12 col-xs-12" src="src.png">
</div>

.fluid-img {
    margin: 60px auto;
}

@media( min-width: 768px ){
        .fluid-img {
            max-width: 768px;
        }
}
@media screen and (min-width: 768px) {
        .fluid-img {
            padding-left: 0;
            padding-right: 0;
        }
}

J'utilise justify-content-centerclasse pour une ligne dans un conteneur. Fonctionne bien avec Bootstrap 4.

<div class="container-fluid">
  <div class="row justify-content-center">
   <img src="logo.png" />
  </div>
</div>

J'ai créé cela et ajouté à Site.css.

.img-responsive-center {
    display: block;
    height: auto;
    max-width: 100%;
    margin-left:auto;
    margin-right:auto;
}

Vous pouvez changer le CSS de la solution précédente comme ci-dessous:

.container, .row { text-align: center; }

Cela devrait également centrer tous les éléments dans le parent div.