按自定义 css 在 woocommerce 的产品页面上居中图片

Question

我正在尝试将自定义图像居中 css 但找不到好的解决方案。谁能看一下？

网址：

而且这个海盗的图像应该居中。我需要为每个产品都做。

我也这样试过:

.woocommerce-product-gallery woocommerce-product-gallery--with-images woocommerce-product-gallery--columns-4 images{
    max-width: 250px;
  vertical-align: middle;
text-align:center;
}


.figure.woocommerce-product-gallery__wrapper{
    max-width: 250px;
   vertical-align: middle;
text-align:center;
}

我怎样才能在每个产品中将此图像居中？

Answer 1

请试试这个并告诉我它是否有效：

.woocommerce-page div.product .woocommerce-product-gallery figure.woocommerce-product-gallery__wrapper {
  margin-left: auto;
  margin-right: auto;
}

而不是

.woocommerce-page div.product .woocommerce-product-gallery figure.woocommerce-product-gallery__wrapper {
  margin: 0; }

按自定义 css 在 woocommerce 的产品页面上居中图片

Center image on product page in woocommerce by custom css

php

image

center