Text in buttons and text containers not centering

Shopify Discussion

Topic summary

A Shopify store owner is experiencing text alignment issues where buttons and text containers (email, search, add to cart) are not centering properly—specifically, text remains top-aligned instead of centered both horizontally and vertically.

Problem Details:

  • Text in various buttons and input fields appears misaligned
  • Screenshots show the alignment issues across multiple site elements
  • Site: hayatigoods.com (password protected)

Solutions Attempted:

Two community members provided CSS code snippets targeting:

  • Newsletter form labels
  • Product form submit buttons
  • Quick-add buttons
  • Image-with-text content buttons

Both solutions used flexbox properties (display: flex, align-items: center, justify-content: center) and explicit height/width declarations.

Current Status:

Unresolved. The original poster reports that none of the provided CSS solutions are working—text continues to align to the top rather than centering vertically. They suspect there may be conflicting code in their theme forcing the top alignment and have requested continued assistance from the helpers.

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

Issue: Text in buttons and text containers (email, search) not centering

Goal: Center buttons and text containers horizontally and vertically

Can you please help me center ALL the buttons and text containers? Thank you so much

pw: uflaw

yasmineb_0-1736917694155.png
yasmineb_0-1736917694155.png438×286 1.98 KB

yasmineb_1-1736917708933.png
yasmineb_1-1736917708933.png888×198 1.26 KB

yasmineb_2-1736917742793.png
yasmineb_2-1736917742793.png868×194 2.5 KB

2

Hi @yasmineb

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
.newsletter__wrapper .newsletter-form__field-wrapper label.field__label {
    padding-left: 128px !important;
}
.product-form__submit.button.button--full-width.button--secondary span {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

Result:

websensepro_0-1736922315980.png
websensepro_0-1736922315980.png338×189 6.53 KB

websensepro_1-1736922355743.png

websensepro_2-1736922419949.png
websensepro_2-1736922419949.png633×244 8.88 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! :rocket: (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

3

Hi @yasmineb

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
button.quick-add__submit {
    text-align: center !important;
}

Here is the result:

image_720.png
image_720.png720×313 73.2 KB

I hope this helps

Best,

Daisy

4

Hmmm for some reason that didn’t align it in the center vertically. It’s still top aligned?

5

Hmmm that also didn’t help me. It’s staying aligned to the top. I also need it applied to all the buttons not just add to cart

6

Update: For some reason those two codes are not aligning the text in the middle vertically. It’s staying top aligned. I wonder if this is an existing issue in the code?

7

@DaisyVo @websensepro are yall able to keep helping me? I’m not sure why your code aren’t working. Thank you

8

Hi @yasmineb

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
.newsletter__wrapper .newsletter-form__field-wrapper label.field__label {
    padding-left: 128px !important;
}
.product-form__submit.button.button--full-width.button--secondary span {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.image-with-text__content .image-with-text__text+.button {
    height: 50px !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;
}
.product-form__submit {
    height: 100% !important;
    margin-bottom: 1rem;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! :rocket: (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

9

@websensepro idk why that’s not working either :disappointed_face: i wonder if something in my code is forcing it to align to the top?