Alignment

Aligning components works in two dimensions and is always defined on the parent of the content you wish to align. To edit how a component aligns its content:

  • Right-click on the component to access its context menu
  • Open its general Style setting
  • Find the Alignment setting
  • Click on one of the nine circles to alignment in both dimensions

Centering Content In A Column

To center the content of a column while keeping it aligned to the top, you would set the Column’s Alignment setting to the second circle from the top left corner.

Vertical Align Multiple Columns

To vertically align the center of multiple columns, set the parent Row’s Alignment setting to the first circle of the second row.

One On The Left. One On The Right.

If you want the content of a column to have different alignments, you will need to use more layout to accomplish that. For example, if you wish to have an image on each side of the column:

  1. Add a row with two columns
  2. Move each image to each inner column
  3. Set the Alignment on of the first inner column to the left, and the other inner column then to the right.
Updated on September 14, 2018

Was this article helpful?

Related Articles