Skip to content
Advertisement

Center image on product page in woocommerce by custom css

I’m trying to center image in custom css but can’t find good solution. Can anyone take a look?

The website :

And image of this piarate should be centered. I need to do it for each single product.

I try like that :

.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;
}

How can i center this image in every single product?

Advertisement

Answer

Please try this and tell me if it works:

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

instead of

.woocommerce-page div.product .woocommerce-product-gallery figure.woocommerce-product-gallery__wrapper {
  margin: 0; }
User contributions licensed under: CC BY-SA
5 People found this is helpful
Advertisement