如何在 Bootstrap 中将图像居中？

Posted 2023-03-05

【中文标题】如何在 Bootstrap 中将图像居中？

【英文标题】：How do I center an image in Bootstrap?

【发布时间】：2017-08-02 08:35:03

【问题描述】：

我正在尝试在 Bootstrap 4 Alpha 6 的轮播中将图像水平居中。

我尝试过的任何方式似乎都不起作用，包括使用center-block。

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

有什么提示吗？

【参考方案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" >
</div>

More on Centering in Bootstrap 4

【参考方案2】：

找到解决办法：

.carousel-item img 
    margin: 0 auto;