Dawn Theme - How to center price in product page ?

[Amal_djebali]

Hello,

I have been trying to center the price in product page in Dawn Theme but I didn't find a way.

I was able to center the Product Title and subtitle (in section-main-product.css).

I tried to center the price in component-price.css.

I tried both :

- text-align: center

- align-items: center; (instead of flex-start)

Do you have any idea please ?

More information:

- I don't want to center everything (description, etc...). I only want to center product title, subtitle and price.

- I use the Dawn theme 2.0. I didn't upgrade since I made a lot of in-code edits

Here below a snapshot of the code html code of the product page.

Thanks for your help !

[oscprofessional · Accepted solution]

@Amal_djebali ,

.product__info-container h1.product__title, p.product__text, .price.price--large, .price dl {
    text-align: center;
    margin: 0 auto;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

[oscprofessional]

@Amal_djebali ,

Welcome to the Shopify Community! Please share your store URL, so that I can check your issue and will back to you with a proper solution. Have a Good Day!....

[Amal_djebali]

Hello @oscprofessional,

Thank you for your answer.

Here is a link for the product page: https://pohesia.com/products/boucles-oreilles-pendentif-poire-tuileries-dore

Have a good day,

[oscprofessional · Accepted solution]

@Amal_djebali ,

.product__info-container h1.product__title, p.product__text, .price.price--large, .price dl {
    text-align: center;
    margin: 0 auto;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

[Amal_djebali]

@oscprofessional 

Thanks for your quick answer.

I just tried. Everything was centered but not the price.

See below a snapshot.

I will keep the code you propose for few minutes, so you can check it Live.

Thank you!

[Amal_djebali · Accepted solution]

@oscprofessional 

I just added !important.

And it works perfectly !

Thanks a lot for the solution.

[oscprofessional]

@Amal_djebali ,

Okay!

If my post is useful then please like my all post!

also ask further help.

Visit our Website for more details : oscprofessionals.com 

[Amal_djebali]

@oscprofessional 

I just have one issue now.

The price is also centred in the collection page.

Can I get it back to align:right and still keep it centred in the product page?

Thanks again!

[oscprofessional]

@Amal_djebali ,

Update this css please

.product__info-container h1.product__title, p.product__text, .price.price--large {
    text-align: center;
}

And add tis css pls

#ProductInfo-template--15012729094255__main .price dl {
    margin: 0 auto;
}

[tarek_guma]

This should works on Dawn 15 and upper: 
Add this code to bottom of css file:
/* Centering the product price */
.product__price, .price {
text-align: center !important; /* Centers the price */
display: block; /* Ensures it takes full width */
margin: 0 auto; /* Centers the block */
}