问题描述
我有点被这个问题困住了:我有一个嵌套的图像容器,每行包含三个图像,三行。我需要它居中。我尝试在父容器上进行文本对齐,但它不起作用,所以我使用了 flex 属性 align-items: center;
但不是在页面中心对齐,图像容器向右溢出使其可滚动。>
我已尝试在 Google Chrome 中检查页面,但似乎无法找到导致该页面的元素。这是未选中 align 属性的快照:
当我勾选它时会发生什么:
如果您需要查看,这里还有我在 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%;
}