Work in Progress: How to Center Components
Last updated
Last updated
Centering components can be very easy or very frustrating. What you need to pay attention to, is the parent container.
There are two ways of centering components:
Center the content of a container
Center the component itself
HTML piles the block components in a column, but most of the time we're going to use the flex-box display. Flex-box by default orders the components in a row and has two axes:
Important: If we change the flex-direction to "column", the axis will swap.
The container will adjust to the size of the content, so sometimes it can be tricky to select it. If you're having trouble with that, the best way is to select it from the Components tab of the Left Side Bar.
Remember to always give it a tag and style the tag, not just the component. You might be able to reuse it later on.
Go to the Design tab, Styles menu, Position section.
Write "flex" in the Display input box.
We're still in the Design tab, Styles menu, but in the Flex and Grid section.
Write "center" in the Justify Content input box.
If for some reason you need it to be a column and not a row:
Go to the Design tab, Styles menu, Flex and Grid section.
Write "column" in the Flex Direction input box.
"Center" in the Align Items input box.
This will center the content of the container, but if the container isn't centered, it will still look off-center. You can center the content of the parent container or you can center the container itself.
We recommend always centering the content of a container, but on some occasions, you will need to do it this way.
I know you can do it!
Go to the Design tab, Styles menu, Space section.
Write "auto" in the Margin Left and Margin Right input box.
Important: This won't work if you have "px" selected as a measurement unit. Be sure to have "N/A" selected.
For more info on Flex-box, you can take a look at this site.
