如何在Bootstrap中居中显示图像？

Question

我试图在Bootstrap 4 Alpha 6的旋转木马中水平居中图像。

我似乎没有尝试过任何方式，包括使用 std::vector<std::string> list={}; std::vector<std::string>::reverse_iterator rit = list.rbegin(); 。

这是我迄今为止所尝试的内容：http://codepen.io/anon/pen/wJdjQg?editors=1100

任何提示？

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>

More on Centering in Bootstrap 4

Answer 2

找到解决方案：

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