如何使用 Bootstrap 将多个图像居中？答案

【问题标题】：How to center multiple images using Bootstrap?如何使用 Bootstrap 将多个图像居中？
【发布时间】：2020-10-15 22:11:03
【问题描述】：

我正在使用 Bootstrap 并尝试使 3 个图像居中。例如，红色框是我的图像的样子，我想让它看起来像蓝色框：

我尝试去掉边距和填充，但我仍然希望图像之间有一些空间。我也尝试使用{ display: table; }, display: table-cell; vertical-align: middle;，但不知何故它对我的图像没有任何作用......有没有办法让图像在Bootstrap中得到一些填充？以下是我的代码：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

.row {
    display: flex;
    align-items: center;
    justify-content: center;
}

.column {
    flex: 33.33%;
    padding: 50px;
    width: 100%;
}

<div class="album text-center">
        <div class="row">
            <div class="column">
                <img src="images/tour1.jpeg" alt="one" style="width:100%">
            </div>
            <div class="column">
                <img src="images/tour2.jpg" alt="two" style="width:100%">
            </div>
            <div class="column">
                <img src="images/tour3.jpeg" alt="three" style="width:100%">
            </div>
            <div class="column">
                <img src="images/tour1.jpeg" alt="one" style="width:100%">
            </div>
            <div class="column">
                <img src="images/tour2.jpg" alt="two" style="width:100%">
            </div>
            <div class="column">
                <img src="images/tour3.jpeg" alt="three" style="width:100%">
            </div>
        </div>
    </div>

谢谢！

【问题讨论】：

您确定您正在使用/加载引导 CSS 库链接吗？他们已经以我为中心。
它们看起来像图中的蓝色框吗？在我的屏幕上，它们只是像图片中的红色框一样居中。
我试过了，但它只提供 1 x 1...我想要正好 3 张图像，以屏幕中间为中心。
你的意思是居中 => 水平和垂直（屏幕中间）？
只是水平的！ | O O O | 像这样，而不是 | O O O | 。

标签： html css twitter-bootstrap

【解决方案1】：

Bootstrap 4 具有完成这项工作的 justify-content-around 类。如果您想获得更小的图像间隙，请考虑使用更窄的容器。

PS：您应该避免在图像包装器中使用col 类。

<div class="container">
  <div class="row justify-content-around">
    <div class="colx"><img src="https://place-hold.it/200x400" alt="" class="img-fluid"></div>
    <div class="colx"><img src="https://place-hold.it/200x400" alt="" class="img-fluid"></div>
    <div class="colx"><img src="https://place-hold.it/200x400" alt="" class="img-fluid"></div>
  </div>
</div>

JSFiddle

【讨论】：

有没有办法调整图像之间的间隙？我试过了，看起来它们仍然处于相同大小的间隙中......

【解决方案2】：

只需添加此类“justify-content-around”即可。

    <div class="album">
        <div class="row justify-content-around">
            <div class="column">
                <img src="images/tour1.jpeg" alt="one" style="width:100%">
            </div>
            <div class="column">
                <img src="images/tour2.jpg" alt="two" style="width:100%">
            </div>
            <div class="column">
                <img src="images/tour3.jpeg" alt="three" style="width:100%">
            </div>
            <div class="column">
                <img src="images/tour1.jpeg" alt="one" style="width:100%">
            </div>
            <div class="column">
                <img src="images/tour2.jpg" alt="two" style="width:100%">
            </div>
            <div class="column">
                <img src="images/tour3.jpeg" alt="three" style="width:100%">
            </div>
        </div>
    </div>

【讨论】：