How to center text inside the add to cart button

[INKLY]

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

[namphan · Accepted solution]

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;
}

[namphan · Accepted solution]

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;
}

[INKLY]

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

[namphan · Accepted solution]

Hi @INKLY,

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

[INKLY]

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 !

[namphan]

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

[BSS-TekLabs]

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

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!

[INKLY]

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

[BSS-TekLabs]

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;
}

[INKLY]

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

[Gideon11]

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