How can I center button?

Hello,

Can someone please tell me how to center my CTA button on my hero image? I was under the impression that if the parent element (my hero image) is a flexbox, everything inside it should automatically be centered? However, I cannot get my button to be centered underneath my hero text.


Here is my site Read-Only: Webflow - jeffwoodsdesign

Published Link: www.jwoodsdesign.com

1 Like
  1. Remove “Center Width”
  2. Remove “Float & Position”
  3. Add “Inline Block”

:grin:

2 Likes

Hey @jwoods7676! Looks like your Button Symbol with its current class is set to Relative along with Float Right:

13%20PM

If you add a combo class to your Hero Button say: [Button 2] [Hero] and then remove the Relative positioning and float, you should be on easy street :slight_smile:

Hope this helps! Also, if you’re planning to collect payments through your site, let us know and I’d be happy to help get you setup :dizzy:

@paywithplasso

2 Likes

Thanks @PixelGeek.

Sizing and alignment seem to be a real sticking problem for me. Is there a tutorial or a video you can recommend so that I can finally get this monkey off my back?

1 Like

Thanks @garymichael1313,

I managed to center the button by following steps 2 and 3 but I’m not sure how to “Center Width”?

That’s the little toggle button that give “auto” on both sides of the display padding and margins:

%40jwoods7676

3 Likes

how the hell is this considered no-code if I have to go through the same annoying motions of css mastery to center a button. this is ridiculous.

1 Like