如何在bootstrap 4中居中图像？

Question

我是Bootstrap 4的新用户，早些时候在Bootstrap 3中我们使用了class＆＃34; center-block＆＃34;，现在我无法在新版本中找到它。

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

中心内联元素实际上与Bootstrap无关。

使用text-align

对图像居中

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

文本将在图像周围流动，因为它是内联元素。

通常：

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

Bootstrap方式：

<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>

Bootstrap方式：

<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>

Answer 3

尝试使用此代码。

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;

    }