如何在Bootstrap中将图像居中？

Question

我正在努力仅使用Bootstrap的CSS类来居中显示图像。我已经试过几种方法了。一种方法是向img元素添加Bootstrap CSS类mx-auto，但它什么也不做。

感谢您的帮助。

<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>

默认情况下，图像为display:inline。如果您只想让居中显示图像(而不是其他列内容)，请使用d-block类将图像设置为display:block，然后mx-auto就可以工作了。

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

演示：http://codeply.com/go/iakGGLdB8s

Answer 3

3 ways to align img in the parent.

1.

img是一个内联元素，如果它使用的元素是一个block元素，.text-center会将内联元素居中对齐。

​

<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>

​

2.

.mx-auto使block元素居中。为此，使用.d-block类将img的display从inline更改为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">
      <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>

​

3.

在其父对象上使用.d-flex和.justify-content-center。

​

<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>

​