Center Product Title and Price Under Product Image in Collections

[kailasachse]

Hello,

Having a hard time centering product titles and prices underneath the product images on collection pages.

I've tried adding this code to theme.scss.liquid file with no luck.

.price {
 justify-content: center !important; 
}
.product-single__title {
    text-align: center!important;
}

Theme is Debut.

I also want to reduce the size of the price font and enlarge the size of the title font.

Have any suggestions?

[suyash1 · Accepted solution]

---

@kailasachse wrote:

Lol thanks!

Trying to eliminate any chance of SEO being picked up unnecessarily. 😉

Okay, replaced original price code with your suggested and it worked, but now price on product page is now centering.

How do we isolate to just the collections pages?

Also tried to add in code to eliminate underline upon hover but did not work.

Thoughts?

This is code as of now:

/*== Center Align Titles and Prices Under Product Images in Collections ==*/
dl.price {
    align-items: center;
}

.h4.grid-view-item__title.product-card__title {    
  text-align: center;    
  width: 100%;    
  display: inline-block;
  text-decoration: none;

}

---

to make prices left on only PRODUCT PAGE add following css

.template-product dl.price{align-items: flex-start;}