web-dev-qa-db-fra.com

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

csstwitter-bootstrap
188
Fixer

Twitter Bootstrap v3.0.3 a une classe: center-block

Centrer les blocs de contenu

Définissez un élément à afficher: bloquer et centrer via la marge. Disponible en mixin et en 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 Bootstrap a déjà l'appel de style css .center-block

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

Vous pouvez voir un échantillon de ici

255
user3098434

La bonne façon de faire est

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

Ajoutez 'center-block' à l'image en tant que classe - aucun css supplémentaire n'est requis

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

Mise à jour 2018

La classe center-block 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"/>
54
Zim

Twitter bootstrap a une classe qui centre: .pagination centré

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;
}
52
David Silva Smith

Vous pouvez utiliser ce qui suit. Il supporte Bootstrap 3.x ci-dessus.

<img src="..." alt="..." class="img-responsive center-block" />
36
Dulith De Costa

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

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

Modifier

Comme indiqué 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 dans v2.3.3 et v3

28
My Head Hurts

Travaille pour moi. essayez d'utiliser center-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>
17
Leroy Gumede

J'ai besoin de la même chose et c'est ici que 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 à CSS:

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

On pourrait utiliser une nouvelle fonctionnalité HTML5 si la version du navigateur ne pose pas de problème:

dans les fichiers HTML:

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

Et en fichier CSS, on écrit:

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

Et ainsi, la division pourrait être parfaitement au centre du navigateur.

1
Laurent

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

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

J'utilise la classe justify-content-center sur une ligne d'un conteneur. Fonctionne bien avec Bootstrap 4.

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

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

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

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