Change the alignment of an object

  • Article

Alignment determines how an element resizes. For example, a left aligned element that is contained in a Grid layout panel will stretch to the right when the Grid is resized.

To change the alignment of an element

  1. On the artboard or under Objects and Timeline, select the object for which you want to change alignment.

  2. Under Layout in the Properties panel, do one of the following:

    • Change the HorizontalAlignment property by clicking Left Cc295167.1e3c2891-633d-4162-a3bd-d5ac53046b56(en-us,Expression.30).png, Center Cc295167.02978741-8e12-476d-afa7-165b613ea515(en-us,Expression.30).png, Right Cc295167.c0d22c24-ad68-4355-b8f2-d6a373deaf8e(en-us,Expression.30).png, or Stretch Cc295167.90aa9534-0480-4a7f-b992-1af23c71ea9c(en-us,Expression.30).png.

    • Change the VerticalAlignment property by clicking Top Cc295167.737a11a8-b9d6-4270-8432-f17bb11a1337(en-us,Expression.30).png, Center Cc295167.5d244079-53d6-4188-ac2b-3a31054a2cd7(en-us,Expression.30).png, Bottom Cc295167.7c84b219-479d-45e7-b2fc-2df1b5e35129(en-us,Expression.30).png, or Stretch Cc295167.fbd6b7db-d726-4f40-b8c7-b287423e6615(en-us,Expression.30).png.

    Note

    If Width and Height for that element are set to Auto under Layout in the Properties panel, then the object may appear to collapse when you change HorizontalAlignment or VerticalAlignment properties in the Properties panel. If this happens, you can set the Height and Width properties if you don't want your object to resize with the application window, or you leave the Height and Width properties set to Auto, and set the Margin properties if you do want your object to resize with the application window.

    Tip

    You can also change alignment by moving an element on the artboard. Notice how the HorizontalAlignment and VerticalAlignment properties change as you move the object to different regions of the grid panel. In Grid layout mode Cc295167.c76bbf09-1922-4f45-8d92-9c8ae64ca4a4(en-us,Expression.30).png, alignment for an element relative to its parent grid is indicated on the artboard as a solid line when alignment is set and margins are enforced, or as a dashed line when alignment is not set and margins aren't observed.