How can I perfectly center a title and price?

[amine15]

How to center title and price

[ZestardTech]

Hello There,

Please share your store URL and Screenshot.
So that I will check and let you know the exact solution here.

[amine15]

amineguebas.myshopify.com

[amine15]

code shiro

[ZestardTech]

Hello there,

Enter password page not open.

Screenshot :-

[amine15]

the screen shot is above

[ZestardTech]

please share me store preview link.

[amine15]

https://amineguebas.myshopify.com/?_ab=0&_fd=0&_sc=1&key=491b7c20ef9a194cd55bdf423ebf5fbaa48999a11cede1856aaf30c241ac8bfe

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.css and paste this at the bottom of the file:

.product-card,.product-card .price {
text-align: center;
justify-content: center;
align-items: center;
}
.price .price__regular {
margin: 0;
}

Screenshot :- https://image.prntscr.com/image/sm6mzDH-TUGailg0m6TVSw.png

[Zworthkey]

.product-card__title {
    display: block !important;
    text-align: center !important;
}
.price{
text-align: center !important;
}

@amine15
Add this code in the bottom of the theme.css or theme.scss

[amine15]

when i tried the code below the price isn t in the exact middle

.product-card,.product-card .price {

text-align: center;

justify-content: center;

align-items: center;

}

.price .price__regular { margin: 0;

}

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.css and paste this at the bottom of the file:

.product-card,.product-card .price dd {
margin: 0;
}

[amine15]

hi please how can i center the solde prices in phones ?

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.css and paste this at the bottom of the file:

.price--on-sale .price__sale {
justify-content: center;
margin: 0;
}

[Zworthkey]

@amine15

.price--on-sale .price__sale {
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center !important;
}

.price__sale {
     display: block !important; 
}

@amine15
Add this code in the theme.scss or theme.css

[amine15]

and please how can i add little space between the two prices in computer website