How to center text inside the add to cart button

Store Design
, , , , ,

Topic summary

Issue: User seeks to center text within an add-to-cart button using CSS.

Solutions Provided:

Multiple contributors offered CSS code targeting .product-form__submit span with properties:

  • display: flex
  • align-items: center
  • justify-content: center
  • gap: 5-10px

Code should be added to base.css, theme.css, or custom CSS section.

Complications:

Initial solutions didn’t work for the user. Investigation revealed:

  • Missing closing bracket in the CSS file
  • The base.css file appears corrupted, preventing code additions at the end

Resolution:

One solution successfully centered the button text. A contributor offered to send a collaborator invite to examine and fix the corrupted base.css file directly.

Alternative Approach:

Another suggestion involved adding CSS through the product page’s custom CSS section and removing the button--full-width class for additional styling control.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Hi, I would like to center the text inside the add to cart button. But I’m not sure which css does that. Does anyone know how to achieve this result? Thank you for your help.

Store URL: https://inkly.fr/?_ab=0&_fd=0&_sc=1&preview_theme_id=163175923977

INKLY_0-1721058035493.png

2

Hi @INKLY ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.product-form__submit>span {
    display: flex;
    align-items: center;
    gap: 5px;
}
1 Like
3

Hi @INKLY ,You can follow these steps

  1. Open Online Store > Theme > Edit Code

  2. Find and open the base.css (or theme.css, custom.css) file

  3. Paste the code snippet below at the bottom of the file and hit save

.product-form__submit.button span {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

Here is the result

BSSTekLabs_0-1721058485703.png
BSSTekLabs_0-1721058485703.png1374×708 53.9 KB

Hope this helps you solve the issue.

Please don’t forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!

4

Hi @BSS-TekLabs , thank you for your response, unfortunately I do not get the same resul with you code:

INKLY_0-1721058713151.png
INKLY_0-1721058713151.png922×164 3.05 KB

INKLY_1-1721058734555.png
INKLY_1-1721058734555.png922×316 28.1 KB

5

Hi @namphan , unfortunately that code is not working for me

6

I’ve checked your site, it is because you don’t have a closing bracket. Just add the code below to the end of the base.css file

}
.product-form__submit.button span {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
7

Hi @INKLY ,

I checked and it seems your base.css file is corrupted, can you add the code here? it will work fine

1 Like
8

Hi,

  1. On the product page, click product information,

  2. Scroll to the bottom, and click custom css,

  3. copy and paste the code;

.product-form__buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

You can remove edit code and remove the class button–full-width class on the add to cart button, the class makes sure the add to cart button spans full width 100%.
The class also gives the button its color.

check out this blog for more info.
How to Center Anything with CSS - Align a Div, Text, and More

9

I do have a closing bracket, it still doesn’t work

INKLY_0-1721060845672.png
INKLY_0-1721060845672.png1090×1504 190 KB

10

Thank you, it worked ! However, what do you mean by my base.css file is corrupted and how can I fix that? Thank you for your help !

11

Hi @INKLY ,

Because when I tested, you can’t add code at the end of the file, it won’t read the code.

If you want, I’ll send you a contributor invite and check it out