# Alignment Tools

{% embed url="<https://youtu.be/WMhmlu9ExSk>" %}

### To Use:

Access Alignment Tools by selecting a component and clicking the More menu.

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2Fd8DGmKgw301dGb7Xx3WY%2FScreenshot%202023-05-31%20at%209.51.20%20AM.png?alt=media&#x26;token=c101135a-e057-4087-8f90-50b68d81614b" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="Align to Screen" %}
{% hint style="info" %}
Align to screen shows up when one or more components are selected.
{% endhint %}

Align to screen acts as if the entire selection is a group and aligns the components with the screen.

### Align Horizontally

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FTJokhoaOpNaqJ8mAk0Kv%2FScreenshot%202023-05-31%20at%2010.04.00%20AM.png?alt=media&#x26;token=02bb0d05-805d-4180-90bc-ea8a6fe4ed14" alt=""><figcaption></figcaption></figure>

### Align Vertically

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FYZI0QjynUNXy518t6njX%2FScreenshot%202023-05-31%20at%2010.05.11%20AM.png?alt=media&#x26;token=9236db5f-83a9-4a57-a310-9bc432838c02" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Align to Selection" %}
{% hint style="info" %}
Align to selection shows up when two or more components are selected.
{% endhint %}

Align to selections acts as if the entire selection is a group and aligns the components with the selection.

### Align Selection Left

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2F4nIlHZtP94TUV8ebBy4t%2FScreenshot%202023-05-31%20at%2010.06.34%20AM.png?alt=media&#x26;token=1f063d00-2a43-40f3-b98f-840c7cc60488" alt=""><figcaption></figcaption></figure>

### Align Horizontal Center

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2Fgh0LzcwxKtGnCprlishc%2FScreenshot%202023-05-31%20at%2010.07.24%20AM.png?alt=media&#x26;token=4c24b5ba-3dd7-455c-867b-166c65d767f5" alt=""><figcaption></figcaption></figure>

### Align Right

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FgbF2iK2Oy6TuM1U8iOFc%2FScreenshot%202023-05-31%20at%2010.10.39%20AM.png?alt=media&#x26;token=54863c2f-c7d2-4ac0-97d1-0fdeb87757ee" alt=""><figcaption></figcaption></figure>

### Align Top

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2F1IiVDw9uFWbAKprWJ5jr%2FScreenshot%202023-05-31%20at%2010.11.40%20AM.png?alt=media&#x26;token=a3832d49-a7c9-4f81-b8e1-380972f57936" alt=""><figcaption></figcaption></figure>

### Align Vertical Center

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FU43QjiZwL6hUzYeMYHK6%2FScreenshot%202023-05-31%20at%2010.13.36%20AM.png?alt=media&#x26;token=012226dd-f70d-4a56-b2b8-06ec8d28ad9a" alt=""><figcaption></figcaption></figure>

### Align Bottom

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2F5B9GHmvh5HoaSJwKepQN%2FScreenshot%202023-05-31%20at%2010.14.53%20AM.png?alt=media&#x26;token=dad8a669-e28c-4f50-af94-a60f3ba9a3b5" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Distribute" %}
{% hint style="info" %}
Distribute shows up when three or more components are selected.
{% endhint %}

Distribute distributes the space between the selected components.&#x20;

### Distribute Vertical Spacing

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2Flgw89reotJorE6atzOs8%2FScreenshot%202023-05-31%20at%2010.16.49%20AM.png?alt=media&#x26;token=ded27082-cd7e-4555-82a8-31d218ad3434" alt=""><figcaption></figcaption></figure>

### Distribute Horizontal Spacing

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FXq56S6mQJ718okV1oL3h%2FScreenshot%202023-05-31%20at%2010.17.57%20AM.png?alt=media&#x26;token=8f7b9bd7-d7c9-4b89-9118-cf72808c6b11" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

<details>

<summary><strong>Keyboard Shortcuts</strong></summary>

**Align to Selection:**\
Align top: OPTION + W

Align left: OPTION + A

Align bottom: OPTION + S

Align right: OPTION + D

Align Vertical Center: OPTION + V

Align Horizontal Center: OPTION + H<br>

**Align to Screen**\
Align Vertically: OPTION + SHIFT + V

Align Horizontally: OPTION + SHIFT + H

</details>

{% hint style="info" %}
When selecting items with different parents, align/distribute options will **not** be available.&#x20;
{% endhint %}