居中网站内容是行不通的

Question

我正在尝试将所有产品都集中在此WordPress页面上，以便所有内容都集中对齐，我尝试使用以下CSS将其全部包装在div中，但这样做是将内容包装到中间，但产品仍然与此对齐。

#big-center {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: block-axis;
-moz-box-orient: block-axis;
box-orient: block-axis;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
}

我想知道是否有人有任何建议，或者我是否缺少一些东西来做到这一点？

这是该页面的链接：http://www.stickems.co.uk/shop-screen-cleaners/

Answer 1

有点

难以理解你的真正意思，但我破解了它; 不太清楚，因为我认为它看起来很好，但这就是使它与中心对齐的原因。虽然这不是完美的编码，但它会对你有所帮助。

转到第 1427 行并在 css 中使用以下更改当前行; wp-content/themes/stickems/style.css？ver=1.0

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    margin-bottom: 25px;
    margin-left: 38%;
    margin-right: 50%;
    width: 22.125%;
}

正如我所说，如果这是你的意思，它会起作用，但它不是完美的编码。从你的问题中，这就是我理解你想要的;https://i.stack.imgur.com/jSrWD.png

Answer 2

试试这些样式更改是否对您有帮助。

.woocommerce ul.products li.product{
  float:left; //Remove this
  display:inline-block; //Add this
  margin-right:3.3%; // changed from 3.8 to 3.3
}
.woocommerce ul.products{
  text-align:center; //add this
}