在产品上使用了填充，所以我现在无法居中

Question

我有几个产品，我用padding/margin在它们之间给了一个space。 当然，最后一个也有填充，所以它不能很好地居中。 我会给你 link Website，但不会给你代码，因为我想知道即使你在产品上使用填充，你如何在一般情况下将产品居中。 应该有一个"special way"

编辑：

我就是这个意思，1是我得到的，2是我想要的。 （深色的是产品，右边的灯箱是padding/margin，最大的是包装纸）

Answer 1

也许这样的事情对你有帮助

.wrapper {
  padding:30px;
  text-align:center;
}
.products {
  margin:15px;
  padding:15px;
}

如果它仍然存在，我会表示您阅读了这篇文章

http://maujor.com/tutorial/centralizando-com-css-um-guia-completo.php

Answer 2

您可以使用 box-sizing: border-box; 让 css 计算元素宽度的填充。

默认框大小调整行为如下：总宽度 = 元素宽度 + 填充宽度。有了这个，填充被添加到盒模型的"outside"。

当您将 box-sizing 设置为 border box 时，元素的填充将被计算为 "inside" 框。

这是一篇解释此行为的文章：Link to Article

Answer 3

您可以使用 first-child() 到 select 第一个 div，不要给它填充。 或者你可以使用 id 到第一个 div 并给出 padding:0;