居中图像组，最后一行问题

Question

我使用以下方法将一组图像居中：DIV 包含器：文本对齐：居中;DIV 图像：显示：内联块。(无浮动(

它工作得很好，但是最后一行是 1 或 2 个像素在右侧移动，无论有多少行(不同的分辨率(。

我无法让它工作。请参阅页面：

https://www.trampolineandparts.co.uk

https://www.trampolineandparts.co.uk/replacement-parts

请帮忙。谢谢！

Answer 1

正如@Mary指出的，它是元素之间的空间。您可以改用父级上的display: flex，这将保持布局并解决间距问题。

div.imgcnt {
    /* text-align: center; */ /* no longer need this */
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* if you want the `.img` elements centered on the page */
}

Answer 2

尽量不要在<div>之间留出任何空间，它应该可以解决您的问题。

Answer 3

嗨，

我查看了网站并注意到 1/2 px 位移。这是因为显示：内联块。我尝试修复它。我会在图像上使用 float：left 而不是使用内联块。尝试将 css 文件更改为此文件。

div.imgcnt {
text-align: center;
padding-left: 6%;
}
div.img {
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
width: 160px;
border: rgba(0, 0, 0, 0.17);
border-style: solid;
border-width: 1px;
float: left;
}

Answer 4

你的内联块元素之间肯定有空格。检查这是否会杀死不需要的空间：

<div class="inline-block"></div><div class="inline-block"></div><div class="inline-block"></div>