Comment centrer une image dans Bootstrap ?

Question

J'ai du mal à centrer une image en utilisant uniquement les classes CSS de Bootstrap. J'ai déjà essayé plusieurs choses. L'une d'entre elles consistait à ajouter la classe CSS de Bootstrap mx-auto à la img mais cela ne fait rien.

Toute aide est la bienvenue.

<div class="container">
    <div class="row">
        <div class="col-4 mx-auto">
            <img class=""...> <!-- center this image within the column -->

            <form...>

            <p...>
            <p...>
            <p...>                
        </div>
    </div>
</div>

Answer 1

L'image est affichée par défaut en tant que inline-block, vous devez l'afficher en tant que block afin de la centrer avec .mx-auto . Cela peut être fait avec des .d-block :

<div class="container">
    <div class="row">
        <div class="col-4">
            <img class="mx-auto d-block" src="...">  
        </div>
    </div>
</div>

Ou laissez-le en inline-block et enveloppez-le dans une div avec .text-center :

<div class="container">
    <div class="row">
        <div class="col-4">
          <div class="text-center">
            <img src="..."> 
          </div>     
        </div>
    </div>
</div>

J'ai fait un violon montrant les deux sens. Ils sont documentés ici également.

Answer 2

Comme l'img est un élément en ligne, il suffit d'utiliser text-center sur son conteneur. Utilisation de mx-auto permettra de centrer le conteneur (colonne) également.

<div class="row">
    <div class="col-4 mx-auto text-center">
        <img src="..">
    </div>
</div>

Par défaut, les images sont display:inline . Si vous voulez seulement le centrer l'image (et non le contenu de l'autre colonne), faites en sorte que l'image display:block en utilisant le d-block et ensuite mx-auto fonctionnera.

<div class="row">
  <div class="col-4">
    <img class="mx-auto d-block" src="..">
  </div>
</div>

Démonstration : http://codeply.com/go/iakGGLdB8s

Answer 3

Trois façons de s'aligner img au centre de son parent.

1. img est un élément en ligne, text-center aligne les éléments en ligne au centre de leur conteneur, si ce dernier est un conteneur block élément.

   <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/> <div class="container mt-5"> <div class="row"> <div class="col text-center"> <img src="https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg" alt="" class="img-fluid"> </div> </div> </div>

2. mx-auto centres block éléments. Pour ce faire, il faut modifier display de l'image de inline à block avec d-block classe.

   <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/> <div class="container mt-5"> <div class="row"> <div class="col"> <img src="https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg" alt="" class="img-fluid d-block mx-auto"> </div> </div> </div>

3. Utilisez d-flex et justify-content-center sur son parent.

   <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/> <div class="container mt-5"> <div class="row"> <div class="col d-flex justify-content-center"> <img src="https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg" alt="" class="img-fluid"> </div> </div> </div>

Answer 4

La classe Bootstrap .center-block fonctionne bien.