Alignment
A walk through of aligning key parts such as text, rows and columns in your layout.
Last updated
Was this helpful?
A walk through of aligning key parts such as text, rows and columns in your layout.
Last updated
Was this helpful?
Alignment refers to the arrangement of parts in relation to each other and to their container. It is a crucial aspect of design that impacts readability, aesthetics, and the overall user experience. Alignment can be both horizontal and vertical, each serving specific purposes in the layout of a page.
Horizontal alignment deals with the positioning of parts along the horizontal axis. It determines how parts are placed from left to right within a container.
Vertical alignment deals with the positioning of parts along the vertical axis. It determines how parts are placed from top to bottom within a container.
Many parts within Appeggio can be aligned horizontally and vertically.
Parts such as columns and text have the same property editors to manage horizontal and vertical alignment.
Horizontal alignment refers to the placement of text or other parts along the horizontal axis of its parent container. Columns and text can be horizontally aligned as follows:
Left: Aligns the text or parts to the left side. Left is the default horizontal alignment.
Center: Aligns the text or parts to the center.
Right: Aligns the text or parts to the right.
Justify: Adjusts the spacing between words so that the text aligns evenly along both the left and right margins. The justify property is only noticeable if the text exceeds one line.
In the example below, the gray column has horizontal alignment applied.
Vertical alignment refers to the placement of text or other parts along the vertical axis of its parent container. Columns and text can be vertically aligned as follows:
Top: Aligns the content to the top. Top is the default vertical alignment.
Center: Aligns the content to the center.
Bottom: Aligns the content to the bottom.
Auto: Lets the browser determine the vertical alignment based on the content and surrounding elements.
Stretch: Stretches the content to fill the height of the container.
Baseline: Aligns the content's baseline with the baseline of its container.
In the example below, the gray column has vertical alignment applied. The parent container is a row. The row has been colored pale blue so that you can see the height of the row, and how the alignment works in relation to the row. The baseline property is covered following the example below.
Below is an example to demonstrate how the vertical baseline property works. In the example below, each of the columns has the vertical - baseline property set. It only becomes apparent after the second column has been set, and moves in relation to the baseline of the first. Baseline alignment is determined by the tallest item in the row. In this case, the tallest column in the row is the first. If your content is the same, the baseline property will be indistinguishable.
It's important to know that if your columns already take up the full height of the row they are in, vertical alignment won't appear to have any effect, because there is nowhere for the columns to move on the vertical axis.
The horizontal alignment of rows, cards, menus, navbars, and footers can be done based on the contents of those containing parts, or to the part itself.
In all of the following examples, a row will be used.
Let's start with aligning the contents of the row horizontally.
Horizontal Alignment - Contents
Horizontal alignment refers to the positioning of the contents (including child elements) of the row along its horizontal axis. Contents can be horizontally aligned within the row as follows:
Left: Aligns the contents to the left of the row. Left is the default horizontal alignment.
Center: Aligns the contents to the center of the row.
Right: Aligns the contents to the right of the row.
Between: Distributes the contents evenly, with the first item at the start and the last item at the end, and equal space between the parts.
Around: Distributes the contents with equal space around each element. The space between parts is equal, but there is also equal space on the outside of the first and last parts.
Evenly: Distributes the contents so that the spacing between any two parts, as well as the space before the first part and after the last one, is equal.
In the example below, the pale blue row has horizontal alignment applied to its contents (the three columns).
Horizontal Alignment - Self
The horizontal alignment of a row refers to how the row itself is positioned within its container (its parent part) on the horizontal axis. The width of the parent container is therefore important. The row itself can be horizontally aligned within its container as follows:
Left: Aligns the row to the left side of the parent container.
Center: Aligns the row to the center of the parent container.
Right: Aligns the row to the right side of the parent container.
Stretch: Stretches the row to fill the entire width of the parent container.
Auto: The row is positioned automatically based on the content and other properties applied to it.
In the example below, the light blue row has various types of horizontal alignment applied to it. The row is housed within a dark blue container to illustrate how the row works inside of its container. It's important to note that if the row has a full width (a width of 100%), it has nowhere to move horizontally. For the purposes of the example, the row was set to a width of 60% so that when horizontal alignment is applied, you can see the row move within its wider container.
When 'stretch' is applied, you'll see that nothing happens until the width of the row is changed to 100%, allowing it to stretch to fill the full width of its container. This is the default behavior of rows that have a full width.
The vertical alignment of rows can be done based on the contents of the row, items in the row, or the row itself.
Let's start with aligning the items in the row vertically.
Vertical Alignment - Items
Vertical alignment of items within a row refers to the positioning of child elements along the vertical axis inside the row. Items can be vertically aligned within the row as follows:
Top: Aligns the items to the top of the row. Top is the default vertical alignment for items.
Center: Aligns the items to the center of the row.
Bottom: Aligns the items to the bottom of the row.
Stretch: Stretches the items to fill the height of the container.
Baseline: Aligns the items' baseline with the baseline of their container in comparison to the height of the other items.
In the example below, the pale blue row has the various types of vertical alignment applied to it.
Vertical Alignment - Content
Vertical alignment of the contents within a row refers to how child elements are positioned along the vertical axis inside a container. Think of the content as having an invisible box around it, being treated as a group of content rather than individual items. Content can be vertically aligned within the row as follows:
Top: Aligns the contents to the top of the row.
Center: Aligns the contents to the center of the row.
Bottom: Aligns the contents to the bottom of the row.
Between: Distributes the contents so that there is equal space between the parts, with the first item at the top and the last item at the bottom of the row.
Around: Distributes the contents with equal space around the content. The space between elements is equal, but there is also equal space on the outside of the first and last elements.
Evenly: Distributes the contents so that the spacing between any two elements, as well as the space before the first element and after the last one, is equal.
In the example below, the pale blue row has vertical alignment applied to its contents (the six columns).
Vertical Alignment - Self
The vertical alignment of a row refers to how the row itself is positioned within its container (its parent part) on the vertical axis if the row is in a flexible container (such as another row). The height of the container is therefore important. The row itself can be vertically aligned within its container as follows:
Top: Aligns the row to the top of the parent container.
Center: Aligns the row to the center of the parent container.
Bottom: Aligns the row to the bottom of the parent container.
Auto: The row is positioned automatically based on the content and other properties applied to it.
Stretch: Stretches the row to fill the entire height of the parent container.
Baseline: Aligns the row's baseline with the baseline of the parent container.
In the example below, the pale blue row has various types of vertical alignment applied to it. The row is housed within another row (dark blue) to illustrate how the row works inside of another flexible container. It's important to note that if the row has a full height (a height of 100%), it has nowhere to move vertically. For the purposes of the example, the row was set to a height of 500px so that when vertical alignment is applied, you can actually see the row move within its taller container.
When 'stretch' is applied, you'll see that nothing happens until the height of the row is changed to 100%, allowing it to stretch to fill the full height of its container. In the above example, setting the baseline on the row has no effect.
