How to Align Element?

About Element Alignment

Element alignment refers to positioning content (such as text, images, or buttons) within a container or layout. 

Proper alignment ensures that your design looks clean, balanced, and professional.

Types of Alignment

Element Alignment

This refers to aligning an element within its parent container. For example, if you place a button inside a row, you can align it left, right, or center according to the row that contains it.

Content Alignment

This involves aligning child elements within a parent element.

• Horizontal Alignment: Positions elements side by side (e.g., left, center, right, or spaced evenly).
• Vertical Alignment: Aligns elements along the vertical axis (e.g., top, middle, bottom, or spaced evenly).

How to Align Elements?

This part will show you how to align elements in some specific cases.

Aligning a Centered Button in a Row

Let’s start with a simple example: centering a button/a single element in a row.

Step 1: Select the Element (image, button, text, etc)

Click on the element. The settings for the selected element will appear in the left-hand sidebar.

Note: The alignment settings are usually located at the bottom of the element settings in the left sidebar.

Step 3: Align the Button

Navigate to the Alignment section in the settings.

Choose Center Alignment to position the button at the center of the row.

Align Content Horizontally with “Fit to Content”

• Case 1: Align content center in a row

Step 1: Choose the Parent Element

In the GemPages Editor. Click the row you want to align content to open the row’s Settings from the left-hand sidebar.

Step 2: Set Column Width

The column width determines how content is distributed within the row. 

Choose Fit to Content. The column automatically adjusts its size to fit the content inside.

Step 3: Align Content

Adjust how content is aligned within the row for horizontal positioning.

Choose “Center” in horizontal alignment.

• Case 2: Align Content Vertically

Step 1: Click the parent element to open its settings

Step 2: Align the Content Center Vertically.