How to align a svg in the menu button container vertically

Hi so Im new to webflow I just need the menu svg in the menu button container vertically aligned so equal spaces top and bottom currently I’ve done it via padding but I know that isn’t the best practice as I need it to be math perfect


Here is my site Read-Only: https://preview.webflow.com/preview/fatzs-ultra-awesome-project?utm_medium=preview_link&utm_source=designer&utm_content=fatzs-ultra-awesome-project&preview=af152fa86847afa4b105c6f379d2a000&workflow=preview

Howdy @fatz4l and welcome to the community :wave:

I took a peek at your read-only link and it looks like you figured out a solution using flexbox! This is typically the best option for vertical centering so I’m glad it’s what you ended up using.

If you’ve got any other questions or you’re running into issues don’t hesitate to reply to this thread—otherwise please go ahead and mark it “Solved” so other folks here know you’ve found the appropriate solution.

Hi Mike thanks for the reply I understand that but when I align it vertically using the presets it doesnt do anything I’ve achieved the current postining by using padding?

My apologies, I didn’t see that you were trying to center the elements within the menu button. The reason you’re having issues is due to the fact that you’re using position: absolute on the button element itself.

I went ahead and recorded a quick video that covers the changes you need to make below:

Hi Mike, you are absolute star thank you very much have marked it being solved I have sent a request to on your website if you could have a check thanks!!

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.