Center Product Title and Price Under Product Image in Collections

[kailasachse]

Update: I was able to center recommended products with this code:

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

Still not sure how to remove underlines upon hover. Any thoughts?

[suyash1 · Accepted solution]

---

@kailasachse wrote:

Update: I was able to center recommended products with this code:

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

Still not sure how to remove underlines upon hover. Any thoughts?

---

To remove border, try this CSS

.product-card:hover .product-card__title, .product-card:focus-within .product-card__title {border-bottom: none !important;}

[kailasachse]

That worked! Thank you!!

Final code to center-align product titles and prices in both collections and for product recommendations. Code also eliminates underlining upon hover. For Debut theme.

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

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

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


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

/*== Removes Underline Upon Hover ==*/
.product-card:hover .product-card__title, 
.product-card:focus-within .product-card__title {
  border-bottom: none !important;
}

[gkhau]

Does anyone know how I can use this code, but also have the text of the product title change color upon hovering?

[suyash1]

share your site URL

[AM13]

Hello.

Thank you so much for this! Worked perfectly on my computer but it's a bit skewed still on mobile. Is there a fix for that?

Thanks!

[Seppe]

Hi, 

Thank you so much for this code, it's just what I was looking for. 

Only there is still one problem... My prices aren't fully centered. I mean, they seem to be centered, but when you look closer it doesn't correctly align with the product name. 
( -> See the attached screenshot please, don't mind the weird photos, I'm still practicing ;)) 

Anyone that can help me with this issue? I Would really appreciate it! 

Btw: I'm using Debut theme and if you need to be on my website, the password is: skufoh and this is my url: www.bonita-avenue.com 

Thanks in advance! 

[Guleria]

Add this css too 

.price dd {
    margin: 0 -0.5em 0 0 !important;
}

[Seppe]

That worked! Thank you very much! 

[Kr7]

Thanks for this code that 8 looking for a long time. However, I still have a problem with the price that I cannot center.

Here is te chope that I put : 

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

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

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

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

/*== Removes Underline Upon Hover ==*/
.product-card:hover .product-card__title,
.product-card:focus-within .product-card__title {
border-bottom: none !important;
}

Can someone help me ?

Thank you so much !!