Streaming live at 10am (PST)

Fixing a Button Positioning

So I feel like i’ve figured out everything in webflow, but button positioning is killing me.

I can’t seem to find a simple "center’ when it comes to this. I just want it aligned center like any other text - but it seems to not play nice.

What am I doing wrong? It’s the media page on this site - https://preview.webflow.com/preview/move-well-main-site?utm_medium=preview_link&utm_source=designer&utm_content=move-well-main-site&preview=90433b82c803aa6f3f625238090a3d59&pageId=5d70960b9b8d7b06848a3764&mode=preview


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @mrimpossible,

You could put the button in a ‘wrapper’ and set the appropriate alignment settings to achieve what you want to do.

In this case added a div, change to flex and align:center, justify:center.

Is that what you’re after?
Keiran
1


Yes - that’s exactly it -

So fro this stuff in general - I need to drop it into a div?

Joel Runyon | IMPOSSIBLE

Twitter: @joelrunyon | @impossiblehq

Push Your Limits. Do Something IMPOSSIBLE.

Also - one more question -

What would be the best way to align this button with the center of the itme associated with it on the left?

http://move-well-main-site.webflow.io/blog

Not sure Im setting this up correctly.

Joel Runyon | IMPOSSIBLE

Twitter: @joelrunyon | @impossiblehq

Push Your Limits. Do Something IMPOSSIBLE.

Hey Joel,

Alignment or justify properties on an element will affect the contents (or children elements).

In your original structure, the ‘button’ is a child of the ‘container’ element.

You could have set the align:center (in the typography settings) and that would have centered the button, however, it would have centered everything else that was with that parent (the ‘container’ element).

Making use of a ‘wrapper’ allows you to use specific align/justify settings to an element without affecting other elements (siblings) within the same parent element. (Sorry if that’s starting to sound confusing!)

In summary, you don’t always have to use a wrapper, particularly if you do want all the elements to have the same align/justify setting.

Keiran

Hey Joel,

There are a couple of things to cover in the set up you have there.

You are using column’s (which is ok), however, using Flexbox is more powerful to use. In saying that there is a little bit of a learning curve to understand. What you are trying to achieve is quite straight forward.

Also, there are some padding values on the ‘Heading’ elements that will always affect alignment.

I’ll make a quick video to explain/demonstrate rather than write a long and potentially confusing forum reply.

Will post the video shortly.

Regards,
Keiran

PS: Info on Flexbox

Hey Joel,

See if this helps.
Keiran

Great -

What would be the best way to align the three elements here - https://move-well-main-site.webflow.io/blog

Header

Description

Right (vertically centered button).

I tried to do it in columns, but it doesn’t seem to play nice?

Joel Runyon | IMPOSSIBLE

Twitter: @joelrunyon | @impossiblehq

Push Your Limits. Do Something IMPOSSIBLE.

Hey Joel,

I wasn’t exactly sure what you described.

Was it any of these?

Let me know.
Keiran

Hey sorry - You got it right the first time - thanks!