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

Question

我使用以下方法将一组图像居中： DIV 容器：文本对齐：居中； DIV 图片：显示：内联块。（无浮动）

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

我做不到。查看页面：

https://www.trampolineandparts.co.uk

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

请帮忙。谢谢！

Answer 1

你的内联块元素之间肯定有白色space。检查这是否会杀死不需要的 space:

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

Answer 2

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

Answer 3

正如@Mary 指出的那样，它是元素之间的 space 。您可以只在父级上使用 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 4

您好，我查看了该网站并注意到了 1 / 2 像素的位移。它来自于 display:inline-block。我试着修好它。我会在图像上使用 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;
}

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

Group of centered images, last row issue

css

centering