Flexbox children alignment issue

Hello,

I have issues aligning the child element (icon) in its flex parent container (menu button 2).


I’m trying to align it in the center of its parent element. What’s weird is the fact that in the default view, when I align it in the center with the Align tool, it works perfectly, but not when I’m in the responsive mobile view.

Here, in the desktop view where it works perfectly(normaly display is at none since I need it in mobile views):
Result


Settings

Here in mobile view, where it doesn’t work, even though it has the same settings:
Result


Settings

I’m lost here.


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

Hi - With the icon element selected, you can set the typography alignment to centre and it should solve the issue. Otherwise, you could use your own custom burger icon. Hope this helps.

Thank you but this only aligns the icon horizontally and I also need it to be centered vertically.

Give your button a size eg. 92px x 92px (and remove padding), then set your icon size to 100% width and 100% height and alignment to flex (centered horizontally and vertically).