How to Center Components
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:
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.
- 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.
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.