# StackLayout Alignment

The StackLayout provides multiple options by which you can control the [Horizontal](https://www.telerik.com/kendo-vue-ui-develop/components/layout/stacklayout/alignment#horizontal-alignment) or [Vertical](https://www.telerik.com/kendo-vue-ui-develop/components/layout/stacklayout/alignment#vertical-alignment) alignment of the content displayed inside the component.

## Horizontal Alignment

To set the StackLayout horizontal alignment, use the [`align`](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/stacklayoutprops#align) property. The `horizontal` key controls the alignment of the inner elements based on the X axis.

The available values are:

* `start`—Uses the start point of the container.
* `center`—Uses the central point of the container.
* `end`—Uses the end point of the container.
* (Default)`stretch`—Stretches the items to fill the width of the container.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/layout/stacklayout/horizontalalign/source.txt)

## Vertical alignment

To set the StackLayout vertical alignment, use the [`align`](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/stacklayoutprops#align) property. The `vertical` key controls the alignment of the inner elements based on the Y axis.

The available values are:

* `top`—Uses the top point of the container.
* `middle`—Uses the middle point of the container.
* `bottom`—Uses the bottom point of the container.
* (Default)`stretch`—Stretches the items to fill the height of the container.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/layout/stacklayout/verticalalign/source.txt)

## Suggested Links

* [API Reference of the StackLayoutProps](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/stacklayoutprops)