Streaming live at 10am (PST)

How to center elements?


#1

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: https://preview.webflow.com/preview/brave-outdoors?utm_source=brave-outdoors&preview=7fae4253119f5603f8a3380d862b6427


#2

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!


#3

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


#4

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.