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.
![Alignment property](https://mintlify.s3-us-west-1.amazonaws.com/makeswift/images/builder/align1.png)
Horizontal alignment exists in Makeswift within the 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](https://mintlify.s3-us-west-1.amazonaws.com/makeswift/images/builder/align2.png)
Middle
Middle is a great way to center your elements with respect to one another, even if they differ in height.
![Middle alignment](https://mintlify.s3-us-west-1.amazonaws.com/makeswift/images/builder/align3.png)
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](https://mintlify.s3-us-west-1.amazonaws.com/makeswift/images/builder/align4.png)
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](https://mintlify.s3-us-west-1.amazonaws.com/makeswift/images/builder/align5.png)
Space between only takes effect if the box 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](https://mintlify.s3-us-west-1.amazonaws.com/makeswift/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](https://mintlify.s3-us-west-1.amazonaws.com/makeswift/images/builder/align7.gif)
Was this page helpful?