72 votes

Comment centrer une image dans Bootstrap ?

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>

151voto

tmg Points 11776

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.

28voto

Skelly Points 27772

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

13voto

mahan Points 2519

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>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X