> This page is for Product.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.makeswift.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.makeswift.com/_mcp/server.

# Align items

> Align items controls the vertical alignment of elements within a box. It ensures that elements are properly aligned, whether at the top, middle, or bottom, providing a balanced and aesthetically pleasing layout.

Align items controls the vertical alignment of elements within a box. It ensures that elements are properly aligned, whether at the top, middle, or bottom, providing a balanced and aesthetically pleasing layout.

When you place other elements in a box you can determine how the elements will be aligned with respect to one another using the “Align items” panel. By default, all content will align at the top of a box. Content can also be aligned in the middle or anchored to the bottom. A fourth option of “space between” lets you space the box's content apart at equal distances.

![Alignment property](/_fern-img/f37d7e6b2d49e48d39ab79c9f89bd9f9422c90570310d0b7e1f28c0a2f090a7d.webp)

> **Note**
>
> Horizontal alignment exists in Makeswift within the
> [margin](/product/docs/the-visual-builder/panels/margin) panel.

## Top

By default items will align to the top of a box. Typically you will use this if all of your contents have a similar height, or if you want specific content like your images to be in line across all of your elements in a row.

![Top alignment](/_fern-img/cb8fba6d014dde6a237b6b1fbd09e6422e7da054be1423d9ba0f02e2a39ca956.webp)

## Middle

Middle is a great way to center your elements with respect to one another, even if they differ in height.

![Middle alignment](/_fern-img/b36d231f2a810e504d47e8ebbfa85e0e06558c1bcf59d3bedd7e728cf84a868f.webp)

## Bottom

Bottom is similar to top and is used in situations where you may want specific content like a button to be in line across all of your elements in a row.

![Bottom alignment](/_fern-img/68ea3581abbed162327d7d27969d55a4844cca8ac3aa2749d436ceef06420850.webp)

## Space between

Space between will set a box's content to be completely spread out at equal distances between them. If you want images to be in line at the top but a button to be in line at the bottom, this is a good alignment to use.

![Space between alignment](/_fern-img/0001617bcc9b31f17e5fd5c26dfd3c809dffe4e152b3c9681f322d0d0a125120.webp)

> **Note**
>
> Space between only takes effect if the box
> [height](/product/docs/the-visual-builder/panels/height) is set to stretch and
> there is extra space created within the box.

## Examples

For a hero section it is typical to use middle alignment.

![Center aligning a hero](/_fern-files/makeswift.docs.buildwithfern.com/46f62208d3ae024d5f5e112f878f0294a27f2ee5bd809521212c7226cbb09f77/images/builder/align6.gif)

In order to properly align elements at the bottom of components, like pricing cards, you'll want to use space between.

![Space between for cards](/_fern-files/makeswift.docs.buildwithfern.com/ed3f0b419920ff915d21d64600a95d43d7f7e8b1a795e06b9ee31c9ce4e70b27/images/builder/align7.gif)