如何在 bootstrap 4 中将图像居中？

Question

我是 Bootstrap 4 的新手，在 Bootstrap 3 的早期我们使用类“center-block”，现在我无法在新版本中找到它。

原文由 Anup Mishra 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

居中一个内联元素实际上与 Bootstrap 无关。

使用中心图像 text-align

图像是内联元素，可以使用 text-align 对齐。

文本将围绕图像流动，因为它是一个内联元素。

通常情况下：

 <div style="text-align: center;">
    <img src="http://placehold.it/200x200" />
</div>

引导方式：

 <div class="text-center">
    <img src="http://placehold.it/200x200" />
</div>

使用 margin

您可以将图像的显示更改为块元素，并使用边距使块居中。

由于我们将显示更改为 block ，因此文本将被推到图像的上方和下方。

 <div>
    <img src="http://placehold.it/200x200" style="display: block;margin: auto;" />
</div>

引导方式：

 <div>
    <img src="http://placehold.it/200x200" class="mx-auto d-block" />
</div>

完整示例

 .my-text-center {
  text-align: center;
}

.my-block-center {
  display: block;
  margin: auto;
}

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="my-text-center">
  <img src="http://placehold.it/200x200" />
</div>

<div class="text-center">
  <img src="http://placehold.it/200x200" />
</div>

<div>
  <img src="http://placehold.it/200x200" class="my-block-center" />
</div>

<div>
  <img src="http://placehold.it/200x200" class="mx-auto d-block" />
</div>

原文由 Ron van der Heijden 发布，翻译遵循 CC BY-SA 4.0 许可协议