Avatar of Doug Foster
Doug Foster
Flag for United States of America asked on

css centering and sizing buttons

I'm trying to get the buttons on my home page to be the same size and centered.  This clearly isn't my strong point.

How do i modify the css so these buttons will be forced to the same width (why is one so wide when the text isn't that wide?) and centered on the page?

Page is at https://nyackboatcharter.com/.

Thanks.
CSSHTMLWordPress

Avatar of undefined
Last Comment
Steve Bink

8/22/2022 - Mon
Doug Foster

ASKER
and as a bonus, the social buttons at the bottom of the footer also should be centered.  this is in a plugin for blocks, and not the theme, unfortunately.  But maybe i can override the left justification.
Steve Bink

Regarding the sizing of the two yellow buttons, I'm assuming the top one is "oversized" and the bottom one is sized as desired.  The difference is due to a class "aligncenter" applied to the top one, which assigns "display:block".  That makes the container, by default, take up the entire width available to it.  You can see that the bottom button is assigned "display:inline-block", which essentially "trims" it to the necessary width.  

Also, neither button has an explicit width assigned, so they will still likely not have the same size once you correct the above issue.

Regarding the placement of the buttons, look at the class "one-half", which sets an explicit left margin.  To center the buttons properly, you'll need to set "margin-left:auto;margin-right:auto" on both.  

I saw no social buttons in the footer, so cannot speak to that.
ASKER CERTIFIED SOLUTION
Steve Bink

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes