Work in Progress: How to Center Components

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.

Center the Content of a Container (horizontally)

Step 1: Select the container

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.

Step 2: Display flex it!

• Go to the Design tab, Styles menu, Position section.

• Write "flex" in the Display input box.

Step 3: Center it!

• 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.

Center the Component Itself (Horizontally)

We recommend always centering the content of a container, but on some occasions, you will need to do it this way.

Step 1: Select the component

I know you can do it!

Step 2: Center 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.