The Align panel is helpful when you want to align two or more page elements to each other or within a content area. With responsive web design, you can choose to align the page elements according to the device for which you are designing your website.
To view the Align panel, choose Window > Align or click the Align tab to make it active in the Panel set. When the Align panel is open, a checkmark is displayed next to the Align option in the Window menu.
In this example, you'll align the Share button with the drip image below it. Follow these steps:
Use the menu at the top of the Align panel to choose the elements that will be aligned:
Align to Selection: Aligns the selected elements to themselves
Align to Content Area: Aligns the selected element(s) in relation to the surrounding Content Area
The Align Objects section offers six settings:
- Align Left Edges
- Align Horizontal Centers
- Align Right Edges
- Align Top Edges
- Align Vertical Centers
- Align Bottom Edges
The Distribute Objects section also has six settings:
- Distribute Left Edges
- Distribute Horizontal Centers
- Distribute Right Edges
- Distribute Top Edges
- Distribute Vertical Centers
- Distribute Bottom Edges
For this example, the goal is to align the Share button with the drip vertically, so that they are centered on their horizontal midpoint.
While the top menu is set to Align to Selection, click the Align Horizontal Centers button. Notice how the elements reposition so that they are stacked vertically on the page, aligned by their horizontal mid points.
Another way to align objects to their centers is to click-drag one of the elements. When it is aligned with another object, a blue line temporarily displays to indicate that they are aligned.