如何将图像置于Bootstrap v4-alpha中？

Question

Bootstrap新手，我开始学习v4。我正在努力仅使用Bootstrap的CSS类来创建一个简单的图像。

我已经尝试了几件事情。一个是将Bootstrap CSS级mx-auto添加到img元素，该元素什么都不做。

帮助表示赞赏。

<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

图片默认显示为内联块，则需要以与.mx-auto使其居中，以将其显示为块。这是可以做到的内置.d-block：

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

或者把它作为内联块，并与.text-center包裹在一个div：

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

我做了一个fiddle显示两种方式。 它们也记录在here。

Answer 2

由于img是一个内联元素，只需在其容器上使用text-center即可。使用mx-auto也会将容器（列）居中。

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

如果只想中心的图像（而不是其他栏目内容），使图像显示：阻滞d-block，然后mx-auto会工作。

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

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