Twitter bootstrap 如何在引导中使映像居中？

我正在努力只使用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>

---

默认情况下，图像显示为内联块，您需要将其显示为块，以便使用

.mx auto

将其居中。这可以使用内置的

.d-block

：

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

我做了一个双向展示。

---

它们也有文档记录。

由于img是一个内联元素，只需在其容器上使用

文本中心即可。使用
mx auto
也将使容器（列）居中

演示：
在其父对象的中心对齐
img
的三种方法。
img
是一个内联元素，
text center
如果容器是
block
元素，则对齐其容器中心的内联元素



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

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

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