Return to previous page

Center single product page content - by Jennifer

This topic has 3 replies, 2 voices, and was last updated 3 years, 1 months ago ago by Jennifer

Jennifer

Participant

November 30, 2021 at 16:43

Hello,

I am trying to center the content of the product single page with css.

I used this css but it only centers the text:

div.product-information-inner
{
display: flex;
justify-content: center;
text-align: center;
}

I am attaching a photo of how it looks.
Do you have any suggestion on how to center the entire thing?
Thanks,

Product single page

#310411 Copied Theme version: 8.0.9

2 Answers

Olga Barlow

Support staff

December 1, 2021 at 15:14

Hello,

Add the below code instead of that one

div.product-information-inner, .product_meta>div, .product_meta>span, .product-share,
.product-content .woocommerce-variation-add-to-cart {
    display:flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.product-info-wrapper form.cart table.variations td.label, 
.product-information form.cart table.variations td.label, 
.product-summary-center form.cart table.variations td.label, .product-information form.cart table.variations td.value {
    text-align: center;
}
.single-product .product-information-inner a.reset_variations {
    display: block;
}

Regards

#310541 Copied

Jennifer

Participant

December 2, 2021 at 20:33

Excelent!
Thank you very much!

#310753 Copied