如何将图像置于Bootstrap中心？

Question

我正在努力只使用Bootstrap的CSS类来居中图像。我已经尝试了几件事。一个是将Bootstrap CSS-class 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>

如果您只想要图像的中心（而不是其他列内容），请使用display:block类制作图像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

Answer 3

有三种方法可以将img与其父级中心对齐。

1. img是一个内联元素，如果容器是text-center元素，block会对齐其容器中心的内联元素。
＆＃13;
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;
1. mx-auto个中心block元素。为此，请使用display类将img从inline更改为block。d-block。
＆＃13;
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;
1. 在其父级上使用d-flex和justify-content-center。
＆＃13;
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;