Center button on page

Store Design
1

I have inserted this button on a page and I would like to center it.

How do I do that?

I tried with different CSS styles, but nothing happens…

Screenshot 2024-11-21 at 13.57.38.png
Screenshot 2024-11-21 at 13.57.38.png3274×1518 303 KB

2

Hey @pije ,

To center the button, you can use CSS properties like flexbox or text-align. Here’s how you can do it based on the type of container:

For a div Container:

f the button is wrapped inside a div, use the following styles:

Using Flexbox:

CSS:

div {
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically (if height is defined) */
  height: 100%; /* Optional: Adjust based on parent container */
}

Using text-align:

div {
  text-align: center;
}
button {
  display: inline-block;
}

For a Standalone Button

If the button isn’t wrapped in a div , apply margin:

css

button {
  display: block; /* Makes it a block element */
  margin: 0 auto; /* Centers horizontally */
}

If you’ve already tried CSS but it’s not working, please share:

  1. The HTML structure around the button.

  2. The CSS styles applied to both the button and its container.

This will help diagnose the exact issue!

If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

3

Hlw @pije
Can you share your store URL so we can investigate your problem?

4

Hello,

Please share “Store URL”

Thanks!

5

Hey @pije

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

6

This worked - thank you very much