如何在WordPress中对齐产品页面？

Question

我正在使用WordPress创建一个网站，并希望将这些元素集中在此页面上：https://www.web-demo-site.eu/trgovina/trepalnice-004-c/

我尝试过类似的事情：

• 保证金：自动！important;
• 各种对齐方式：居中！重要；

但是似乎没有任何效果。 目前我有：

#content div.product.type-product{
    margin-left: 20%;
}

这是可行的，但由于不能在所有设备上很好地对齐而无法正常工作。 是否可以通过Woocommerce调整产品页面上的内容？

Answer 1

一种存档方法是：

1. 从margin-left中移除#content div.product.type-product。
2. 将display: flex和justify-content: center添加到 .single-product .woocommerce-container。

另一种方法是删除float，并将margin: 0 auto添加到.single-product .woocommerce-container #content

---

解决方案1 ​​：

.single-product .woocommerce-container {
    display: flex;
    justify-content: center;
}

解决方案2 ：

.single-product .woocommerce-container #content {
    float: none;
    margin: 0 auto;
}

您可以将CSS添加到定制程序中，或者添加子主题的CSS。