如何在引导程序 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>

更多信息在link

Answer 2

尝试使用此代码。

html:

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-12 centered">
                        <img alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" />
                    </div>
                </div>
            </div>
        </div>
    </div>

css:

centerd{

        text-align: center;

    }

Answer 3

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