How to center elements?

I built this simple “coming soon” page for my site, and everything looks fine on desktop.

On mobile portrait I tried to change the width of the block (Logo block) holding the 2 logo images to be 50% width. When it resizes it, it’s left-aligned.

I’ve tried changing the display settings to Flex, but that moved and stretched the images out and didn’t produce the effect I’m going for.

Basically I still need to gain an understanding out how to apply site structure and display settings properly.


Here is my site Read-Only: Webflow - Brave Outdoors

Hey Anthony,

Cool looking site!

The reason why your ‘logo block’ was aligning left is because ‘main content’ was set as block.

If you set ‘main content’ to flex → vertical → centre horizontally → centre vertically - you should see it centred.

This would also be a great opportunity to try the Grid layout.

Good Luck!

If you create a new div parent to Logo Block, make that new parent to flex center it.
then set logo block to 50% and it will work

Or you set the Logo Block to Block and use the center element

1 Like

Thank you Janne, that worked.

I was trying to use Flex and the images were getting skewed… and finally realized that I had the Flex Layout set to horizontal when it should have been vertical.