Question

我使用以下方法将一组图像居中： DIV Containter：text-align：center; 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 class="inline-block"></div><div class="inline-block"></div><div class="inline-block"></div>

Answer 3

尽量不要在<div>之间留下任何空格，这样可以解决您的问题。

Answer 4

嗨我看了一下网站，注意到了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;
}

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

4 个答案: