> ## Documentation Index
> Fetch the complete documentation index at: https://makeswift-sasha-eng-8460-create-a-guide-for-troubleshooting.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

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

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.

<Frame>![Alignment property](https://mintlify.s3.us-west-1.amazonaws.com/makeswift-sasha-eng-8460-create-a-guide-for-troubleshooting/images/builder/align1.png)</Frame>

<Note>
  Horizontal alignment exists in Makeswift within the
  [margin](/product/component/property-controls/margin) panel.
</Note>

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

<Frame>![Top alignment](https://mintlify.s3.us-west-1.amazonaws.com/makeswift-sasha-eng-8460-create-a-guide-for-troubleshooting/images/builder/align2.png)</Frame>

## Middle

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

<Frame>![Middle alignment](https://mintlify.s3.us-west-1.amazonaws.com/makeswift-sasha-eng-8460-create-a-guide-for-troubleshooting/images/builder/align3.png)</Frame>

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

<Frame>![Bottom alignment](https://mintlify.s3.us-west-1.amazonaws.com/makeswift-sasha-eng-8460-create-a-guide-for-troubleshooting/images/builder/align4.png)</Frame>

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

<Frame>![Space between alignment](https://mintlify.s3.us-west-1.amazonaws.com/makeswift-sasha-eng-8460-create-a-guide-for-troubleshooting/images/builder/align5.png)</Frame>

<Note>
  Space between only takes effect if the box
  [height](/product/component/property-controls/height) is set to stretch and
  there is extra space created within the box.
</Note>

## Examples

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

<Frame>![Center aligning a hero](https://mintlify.s3.us-west-1.amazonaws.com/makeswift-sasha-eng-8460-create-a-guide-for-troubleshooting/images/builder/align6.gif)</Frame>

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

<Frame>![Space between for cards](https://mintlify.s3.us-west-1.amazonaws.com/makeswift-sasha-eng-8460-create-a-guide-for-troubleshooting/images/builder/align7.gif)</Frame>