web-dev-qa-db-fra.com

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'un d'eux consistait à ajouter Bootstrap CSS-class mx-auto à l'élément img, mais cela ne fait rien.

L'aide est appréciée.

<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>
twitter-bootstrapbootstrap-4
44
Daniel

L'image par défaut est affichée comme bloc en ligne, vous devez l'afficher comme bloc pour pouvoir la centrer avec .mx-auto. Cela peut être fait avec .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 comme inline-block et enveloppez-le dans un 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 aussi.

83
tmg

Comme img est un élément en ligne, utilisez simplement text-center sur son conteneur. Utiliser mx-auto centrera également le conteneur (colonne).

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

Si vous souhaitez uniquement centrer l'image (et non le contenu de l'autre colonne), définissez l'image display:block à l'aide de la classe d-block, puis mx-auto fonctionnera.

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

Démo: http://www.codeply.com/go/iakGGLdB8s

14
Zim

Il y a trois façons d'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 son conteneur si celui-ci est un élément block.
<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>
  1. mx-auto centre block éléments. Pour cela, changez display de l'img de inline en block avec d-block class.
<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>
  1. 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>
8
mahan