在 Chrome Bootstrap 中不断改变网格中图像之间的垂直间隙答案

【问题标题】：In Chrome Bootstrap keeps changing vertical gap between images in a grid在 Chrome Bootstrap 中不断改变网格中图像之间的垂直间隙
【发布时间】：2018-11-26 09:41:12
【问题描述】：

我有一个画廊的图像网格，在浏览器具有一定宽度的某些情况下看起来不错，但是当您在 Chrome 中缩小浏览器的大小时，它会改变项目之间的垂直间隙。在 Microsoft Edge 中，它按预期工作（未尝试过 Firefox）。我需要保持垂直间隙一致并且高度只有大约 10 像素。

以下是浏览器之间的区别： https://i.imgur.com/7ZoA6Fz.jpg

要亲自尝试一下，请使用 Chrome 并查看下面链接中的结果，然后调整预览窗口的大小以触发断点。

https://www.codeply.com/go/DUmlhXetYE

如果您无法重复该问题，则可能是浏览器更新问题...

【问题讨论】：

标签： css image layout grid positioning

【解决方案1】：

如果您在.gallery-items 上删除display: flex;，则边距是一致的。

在 chrome、ff 和 edge 中看起来还可以。

【讨论】：

抱歉回复晚了。这确实有效，但最小视图中的项目（每行 1 个）不再居中。我使用 display flex 来使用 margin: auto; 并在中心对齐项目（每行只有 1 个）。有没有办法让他们居中？
第二个问题的答案是把align="center"放在<div class="row">上