Bootstrap，如何将所有图像对齐在中心？ [复制]答案

【问题标题】：Bootstrap, how to align all image on the center? [duplicate]Bootstrap，如何将所有图像对齐在中心？ [复制]
【发布时间】：2020-09-30 17:25:48
【问题描述】：

目前我的网格图像是这样对齐的

但我的目标是制作像这样的网格图像，注意“img 1”在中心对齐。如何做到这一点？

HTML

<div class="container">
    <div class="row imagetiles">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
            <img src=https://i.imgur.com/nXSiWbw.jpg class="img-responsive">
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
            <img src=https://i.imgur.com/0dXOdvZ.jpg class="img-responsive">
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
            <img src=https://i.imgur.com/nXSiWbw.jpg class="img-responsive">
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
            <img src=https://i.imgur.com/0dXOdvZ.jpg class="img-responsive">
        </div>
    </div>
</div>

CSS

div.imagetiles div.col-lg-3.col-md-3.col-sm-3.col-xs-6{
  padding: 0px;
}

jsfiddle can be view here

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

尝试将 my-auto 类添加到您的 img 标签中
如果第一个不起作用，请尝试使用类 d-flex align-content-center flex-wrap 使整行成为 flex-wrap

您可以找到更多here。

【讨论】：

hmmm 似乎两者都不适用于我的 jsfiddle
你确定你实现了引导程序吗？因为如果我在 jsfiddle 引导程序中添加简单的类就不会像它应该的那样工作
大家好，最初的 JSFiddle 有 JS 错误，因为 jQuery 版本不正确。请检查开发者控制台

【解决方案2】：

只需将其添加到您的 CSS 中：

.imagetiles {
 align-items: center;
 display: flex;
}

jsfiddle 在这里：https://jsfiddle.net/7snfxL4d/

【讨论】：

工作，但不是以引导方式。

【解决方案3】：

您可以使用不同的方法，但 flex 方法真的很简单：

.imagetiles{
  display: inline-flex;
  align-items: baseline;
}

【讨论】：

【解决方案4】：

将您的 CSS 更改为：

div.imagetiles div.col-lg-3.col-md-3.col-sm-3.col-xs-6{
  padding: 0px;
  align-self: center;
}
div.imagetiles{
  display: flex;
}

here 是 jsfiddle

【讨论】：

【解决方案5】：

这是 Bootstrap 4 的方法。

您只需将d-flex align-items-center 类添加到row：

<div class="container">
    <div class="row imagetiles d-flex align-items-center">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 p-0">
            <img src=https://i.imgur.com/nXSiWbw.jpg class="img-fluid">
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 p-0">
            <img src=https://i.imgur.com/0dXOdvZ.jpg class="img-fluid">
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 p-0">
            <img src=https://i.imgur.com/nXSiWbw.jpg class="img-fluid">
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 p-0">
            <img src=https://i.imgur.com/0dXOdvZ.jpg class="img-fluid">
        </div>
    </div>
</div>

此外，您在初始 JSFiddle 中使用了错误版本的 Bootstrap 4。此刻更新到最新版本。此外，使用的 jQuery 版本也不正确（您应该注意到开发者控制台中的错误）。

要将特定的 DIV 设置为零填充，您可以使用 Bootstrap 布局帮助类p-0；你不需要在 CSS 中专门设置它。

最后，img-responsive 用于 Bootstrap 3，img-fluid 用于 Bootstrap 4。不要混淆它们。

JSFiddle：https://jsfiddle.net/shivanraptor/bq8covg5/7/

【讨论】：