Aligning and sizing elements

Although we can position the elements any where on the page on a pixel accuracy using CTRL+Arrow keys, sometimes it is very useful to reposition or resize an element in relation to others. The Align & Size Palette and Align and Size Context menu commands are there for it.

The Align & Size toolbar can be shown/hidden by clicking the

icon on the View Toolbar or by pressing F3.

To select multiple elements on a page, click the elements holding down the SHIFT key.

	Align to left	Aligns the left edges of the selected elements to the left edge of the left most element. If CTRL key is pressed when clicking on this button, the reference element becomes the last element in the selection instead of the left most element.
	Align to right	Aligns the right edges of the selected elements to the right edge of the right most element. If CTRL key is pressed when clicking on this button, the reference element becomes the last element in the selection instead of the right most element.
	Align to top	Aligns the top edges of the selected elements to the top edge of the top most element. If CTRL key is pressed when clicking on this button, the reference element becomes the last element in the selection instead of the top most element.
	Align to bottom	Aligns the bottom edges of the selected elements to the bottom edge of the bottom most element. If CTRL key is pressed when clicking on this button, the reference element becomes the last element in the selection instead of the bottom most element.
	Space horizontally	Gives horizontal spaces between selected elements
	Space vertically	Gives vertical spaces between selected elements
	Space horizontally, equally	Equalizes the horizontal spaces between the selected elements. If there are only two elements in the selection the space between the elements are eliminated.
	Space vertically, equally	Equalizes the vertical spaces between the selected elements. If there are only two elements in the selection the space between the elements are eliminated.
	Align horizontal centers	Aligns the centers of the selected elements horizontally. If CTRL key is pressed when clicking on this button, the reference element becomes the last element in the selection.
	Align vertical centers	Aligns the centers of the selected elements vertically. If CTRL key is pressed when clicking on this button, the reference element becomes the last element in the selection.
	Center horizontally in parent	Aligns the selected elements to the horizontal center of their parent container
	Center vertically in parent	Aligns the selected elements to the vertical center of their parent container
	Roll up and down container	Rolls up or down the selected container element. Roll up means setting the height of the container to 2 pixels. Roll down means restoring the height of the container to its original height.
	Shrink container	Shrinks the container to eliminate the unused space below the bottom most element and at the right side of the right most element.
	Equalize widths	Makes the widths of the selected elements equal. If CTRL key is pressed when clicking on this button, the reference element becomes the last element in the selection.
	Equalize heights	Makes the heights of the selected elements equal. If CTRL key is pressed when clicking on this button, the reference element becomes the last element in the selection.
	Size to the left most	Sizes the selected elements to align to the left edge of the left most element.
	Size to the right most	Sizes the selected elements to align to the right edge of the right most element.
	Size to the top most	Sizes the selected elements to align to the top edge of the top most element.
	Size to the bottom most	Sizes the selected elements to align to the bottom edge of the bottom most element.