I need help center my text for product images

Store Design
1

Hey guys anyone know how to center my product text so that its in the center under each product.

Any help would be greatly appreciated!
Store link: https://xsiist.myshopify.com/ Pass: fafaor

fwaefwfafa.JPG
fwaefwfafa.JPG921×689 27.7 KB

2

@tonyrss

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

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

.price__regular, .price__sale {
    margin-right: 0px !important;
}

.product-card__title {
    border-bottom: 0px solid transparent !important;
    display: block !important;
    text-align: center !important;
}
1 Like
3

hello @tonyrss

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.template-collection .grid .grid-view-item.product-card .grid-view-item__title.product-card__title {
     text-align: center;
     display: block;
 }
 .template-collection .grid .grid-view-item.product-card .price.price--listing {
     text-align: center;
    display: block;
 }
  .template-collection .grid .product-card__title {
    border-bottom:  transparent !important;
 }
1 Like
4

Thank you guys! I did have to combine both of your codes. For anyone who needs it there is what the final coding looks like

/* BIG CODE FOR MOVING TITLE OF PRODUCT AND $$ TO BE CENTERED */
.price {
display: block !important;
text-align: center !important;
}

.price__regular, .price__sale {
margin-right: 0px !important;
}

.product-card__title {
border-bottom: 0px solid transparent !important;
display: block !important;
text-align: center !important;
} .template-collection .grid .grid-view-item.product-card .grid-view-item__title.product-card__title {
text-align: center;
display: block;
}
.template-collection .grid .grid-view-item.product-card .price.price–listing {
text-align: center;
display: block;
}
.template-collection .grid .product-card__title {
border-bottom: transparent !important;
}

5

@tonyrss

Only use this code

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

.price__regular, .price__sale {
    margin-right: 0px !important;
}

.product-card__title {
    border-bottom: 0px solid transparent !important;
    display: block !important;
    text-align: center !important;
}