twitter-bootstrap 如何在 Bootstrap 中将图像居中？

How can I center an image in Bootstrap?

提问by Daniel

I am struggling to center an image using only Bootstrap's CSS-classes. I already tried several things. One was adding Bootstrap CSS-class mx-autoto the imgelement, but it does nothing.

我正在努力仅使用 Bootstrap 的 CSS 类来居中图像。我已经尝试了几件事。一个是将引导CSS类mx-auto的img元素，但它什么都不做。

Help is appreciated.

帮助表示赞赏。

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

回答by tmg

Image by default is displayed as inline-block, you need to display it as block in order to center it with .mx-auto. This can be done with built-in .d-block:

图像默认显示为 inline-block，您需要将其显示为块以使用.mx-auto. 这可以通过内置来完成.d-block：

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

Or leave it as inline-block and wrapped it in a div with .text-center:

或者将其保留为内联块并将其包装在一个 div 中.text-center：

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

I made a fiddleshowing both ways. They are documented hereas well.

我做了一个小提琴，展示了两种方式。它们也被记录在此处。

回答by Zim

Since the img is an inline element, Just use text-centeron it's container. Using mx-autowill center the container (column) too.

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

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

By default, images are display:inline. If you only want the center the image(and not the other column content), make the image display:blockusing the d-blockclass, and then mx-autowill work.

默认情况下，图像是display:inline. 如果您只希望图像居中（而不是其他列内容），请display:block使用d-block类制作图像，然后mx-auto就可以了。

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

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

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

回答by mahan

Three ways to align imgin the center of its parent.

img在其父项的中心对齐的三种方法。

1. imgis an inline element, text-centeraligns inline elements in the center of its container should the container be a blockelement.

1. img是一个内联元素，text-center如果容器是一个元素，则在其容器的中心对齐内联元素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 text-center">
      <img src="https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg" alt="" class="img-fluid">
    </div>
  </div>
</div>

1. mx-autocenters blockelements. In order to so, change displayof the img from inlineto blockwith d-blockclass.

2. mx-auto中心block元素。为此，display将 img 从更改inline为blockwithd-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>

1. Use d-flexand justify-content-centeron its parent.

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>