The toolbar provides buttons to assist you in aligning the components in your UI Designs.
Press the shift or control key when selecting objects to make multiple selections. The selected objects will be displayed with a bounding box that has drag rectangles at each corner and in the middle of each side as shown in Figure 1.
Figure 1 - Multiple objects ready for alignment
The alignment operation will use the most recently selected component as the standard for aligning the other selected objects.
NOTE You can recognize the most recently selected component by looking for the one with solid drag rectangles. In Figure 1, the Range Editor component illustrates the appearance of the most recently selected component.
The toolbar's buttons are logically grouped into sets which perform similar operations, as shown in Figure 2. The three buttons in the Horizontal Alignment section allow you to align the left edges, centers, or right edges of the selected objects respectively. Similarly, the three buttons in the Vertical Alignment section allow you to align the top edges, centers, or bottom edges of the selected objects.
Figure 2 - The Toolbar Pane for the UI Design Editor
The selected components will be moved as necessary to align themselves to the placement of the most recently selected component, as shown in Figure 3.
Figure 3 - Multiple objects after alignment
NOTE If you perform an alignment that does not give the desired results, you may use the standard Undo item in the Edit menu to restore your design to its pre-aligned state.