Center button on page

[pije]

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...

 

[rajweb · Accepted solution]

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

[BrainStation23]

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

[topnewyork]

Hello, 

Please share "Store URL"

Thanks!

[Moeed]

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

[pije]

This worked - thank you very much