html - Bootstrap，如何将所有图像对齐在中心？

Question

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

但我的目标是制作这样的网格图像，注意“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

Answer 1

这是 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/