如何在Bootstrap中将图片居中显示？

Question

我正在尝试在Bootstrap 4 Alpha 6的轮播中水平居中一张图片。

无论我尝试什么方式，包括使用center-block，似乎都不起作用。

以下是我迄今为止尝试过的方法：http://codepen.io/anon/pen/wJdjQg?editors=1100

有什么提示吗？

- Laurent

Answer 1

center-block在Bootstrap 4中已被mx-auto取代。 mx-auto表示自动x轴边距（margin=left: auto; margin-right: auto），因此它可用于居中display:block或display:flex元素。

<div class="carousel-item active">
          <img class="img-fluid mx-auto" src="https://unsplash.it/200/200" alt="First slide">
</div>

Bootstrap 4中心对齐更多内容

- Zim

Answer 2

发现了一个解决方案：

.carousel-item img {
    margin: 0 auto;
}

- Laurent