Streaming live at 10am (PST)

How can I center button?


#1

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: https://preview.webflow.com/preview/jeffwoodsdesign?preview=7e70e0a47652e619eaef544681bf6771

Published Link: www.jwoodsdesign.com


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

:grin:


#3

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


#4

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?


#5

Thanks @garymichael1313,

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


#6

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

%40jwoods7676