web-dev-qa-db-fra.com

Image réactive aligner le centre bootstrap 3

Je réalise un catalogue à l'aide de Bootstrap 3. Les images du produit, lorsqu'elles sont affichées sur des tablettes, 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 sera aidera à résoudre le problème?

enter image description here

htmlcssimagetwitter-bootstrapalignment
398
Konstantin Rusanov

Si vous utilisez Bootstrap v3.0.1 ou supérieur, vous devriez utiliser cette solution à la place. Il ne remplace pas les styles de Bootstrap par des CSS personnalisées, mais utilise plutôt une fonctionnalité Bootstrap.

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

C'est une solution agréablement facile. Comme .img-responsive de Bootstrap définit déjà display: block, vous pouvez utiliser margin: 0 auto pour centrer l'image:

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

Il y a .center-block class dans Twitter Bootstrap 3 (Since v3.0.1), utilisez donc:

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

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

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

Remarque: center-block fonctionne même lorsque img-responsive est utilisé

99
Harry Bosh

Utilisez simplement .text-center class si vous utilisez Bootstrap 3.

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

Remarque: cela ne fonctionne pas avec img-responsive

31
Sai Kiran Sripada

Cela devrait centrer l'image et la rendre sensible.

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

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

Vous pouvez toujours travailler avec img-responsive sans impacter 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 cette img est imbriquée. Ce img-responsive personnalisé ne fonctionnera que dans cette zone.

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

<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 concerne l'impact potentiel de la modification de img-responsive dans son ensemble. Bien entendu, center-block est la solution la plus simple.

3
KannarKK

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>

3
Rafiqul Islam

Pour ajouter aux réponses déjà données, le fait d'avoir le img-responsive en combinaison avec img-thumbnail définira display: block sur display: inline block.

2
M. Oranje

Essayez ce code, cela fonctionnera aussi pour les petites icônes avec bootstrap 4 car il n’existe pas de classe de bloc central, c’est donc bootstrap 4, alors essayez cette méthode, elle vous sera utile. Vous pouvez modifier la position de l'image en définissant le .col-md-12 sur .col-md-8 ou .col-md-4, il vous appartient.

<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>
2
faseeh
<div class="col-md-12 text-center">
    <img class="img-responsive tocenter" />
</div>

.

<style>
   .tocenter {
    margin:0 auto;
    display: inline;
    }
</style>
2
user956584
@media (max-width: 767px) {
   img {
     display: table;
     margin: 0 auto;
   }
}
2
Ahmed

Il suffit de placer toutes les images miniatures dans un div/ligne comme ceci:

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

et tout ira bien!

1
Power Engineering

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

Prenez par exemple Bootstrap v3.3.6:

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

La valeur par défaut de dispaly pour <img> est inline. La valeur block affichera un élément en tant qu'élément de bloc (comme <p>). Il commence sur une nouvelle ligne et occupe toute la largeur. De cette manière, les deux paramètres de marge permettent à l’image de rester horizontalement au centre.

0
themefield

La méthode la plus exacte appliquée à tous les objets Booostrap utilisant uniquement des classes standard consisterait à ne pas définir les marges supérieure et inférieure (car image peut hériter de celles du parent). Par conséquent, j'utilise toujours:

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

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

0
LordMagik

Vous pouvez le corriger avec la marge de définition: 0 auto

ou vous pouvez aussi 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>

0
Ganesh Putta