当我使用居中图像容器时页面向右溢出

Page overflowing to the right when I use center an image container

我有点被这个问题困住了:我有一个嵌套的图像容器,每行包含三个图像,三行。我需要它居中。我在父容器上尝试了文本对齐,但它不起作用,所以我使用了 flex 属性 align-items: center; 但图像容器没有在页面中心对齐,而是向右溢出可滚动。

我已经尝试检查 Google Chrome 中的页面,但我似乎无法找到导致它的元素。这是未选中对齐 属性 的快照:

enter image description here

这是我勾选它时发生的情况:

enter image description here

这也是我在 Codepen 中的代码,如果您需要查看:

https://codepen.io/asparagus-inator/pen/dyOrNmv

我已经查看我的代码几个小时了,我不知道是什么导致了这种行为。我真的很感激你的帮助。提前谢谢你。

您的问题出在 img 元素上。更改 img-row 和 gallery-img 类 修复它。只需要正确设置宽度并调整 img-row 内容。

.img-row {
     display: flex;
     width: 100%;
     height: auto;
     justify-content: center;
 }

 .gallery-img {
     width: 30%;
     height: auto;
     padding: 1%;
}