提问者:小点点

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


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

我试着在谷歌Chrome中查看这个页面,但我似乎找不到是什么元素造成的。以下是未选中align属性的快照:

在此输入图像说明

下面是我在上面打勾时发生的情况:

在此输入图像说明

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

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

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


共1个答案

匿名用户

您的问题出在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%;
}