Comment puis-je centrer une image dans Bootstrap v4-alpha?

Question

Nouveau sur Bootstrap et j'ai commencé à apprendre la v4. J'ai du mal à centrer une image simple en utilisant seulement les classes CSS de Bootstrap.

J'ai déjà essayé plusieurs choses. L'un ajoutait Bootstrap CSS-class mx-auto à l'élément img, qui 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> 

Answer 1

Image par défaut est affiché sous la forme inline-block, vous devez l'afficher comme bloc afin de centrer avec .mx-auto. Cela peut être fait avec intégré .d-block: Ou le laisser comme inline-block et enveloppé

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

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 une fiddle montrant les deux sens. Ils sont également documentés here.

Answer 2

Comme l'img est un élément en ligne, utilisez simplement text-center dans son conteneur. L'utilisation de mx-auto centre également le conteneur (colonne).

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

Si vous ne voulez que le centre de l'image (et non l'autre contenu de la colonne), faire l'affichage de l'image: bloc avec d-block, puis mx-auto fonctionnera.

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

http://www.codeply.com/go/iakGGLdB8s