Wie kann ich ein Bild in Bootstrap v4-alpha zentrieren?

Question

Neu bei Bootstrap und ich habe angefangen, v4 zu lernen. Ich habe Probleme, ein einfaches Bild mit nur den CSS-Klassen von Bootstrap zu zentrieren.

Ich habe schon mehrere Dinge ausprobiert. Einer hat die Bootstrap CSS-Klasse mx-auto zum img Element hinzugefügt, was nichts tut.

Hilfe ist willkommen.

<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

Bild standardmäßig als Inline-Block angezeigt wird, müssen Sie es als Block anzuzeigen, um es zu zentrieren mit .mx-auto. Dies kann mit einem in dem .d-block erfolgen:

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

Oder lassen Sie es als Inline-Block und wickelte ihn in einem div mit .text-center:

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

ich ein fiddle beiden Richtungen zeigt gemacht. Sie sind auch dokumentiert here.

Answer 2

Da der IMG ein Inline-Element ist, verwenden Sie einfach text-center auf seinem Container. Mit mx-auto wird auch der Container (Spalte) zentriert.

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

Wenn Sie nur das Zentrum das Bild (und nicht die andere Spalte Inhalt) möchten, stellen Sie die Bildanzeige: Block mit d-block, und dann wird mx-auto arbeiten.

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

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