如何在引导程序 4 中居中图像？

Question

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

Answer 1

这可以通过内置的 .d-block 来完成：

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

此链接中的更多信息

Answer 2

居中内联元素实际上与 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>

完整示例

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

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