Gum provides simple controls for centering objects inside of their parents. This page shows how to center objects in a variety of situations. For brevity this document uses vertical centering, but the same concepts apply to horizontal centering.
The easiest way to center an object is to use the center Anchor. This sets all of the values necessary to center an object both vertically and horizontally.
Objects can be centered by setting their unit and numerical values. The Alignment tab is a shortcut for these values. For example, to set an object so that it is centered vertically, the following values can be set:
Y = 0
Y Units = Pixels from Center
YOrigin = Center
Centering can be performed with margins by adding an additional container which will create the necessary margins. For example, consider a situation where we want to center the green rectangle inside the blue rectangle, but leave a 32 pixel margin at the top.
We may want something similar to the following image:
To do this, an additional container can be added as shown in the following image:
In this case, the container has the following relevant properties:
Y = 0 (so it is pressed against the bottom)
Y Units = Pixels From Bottom (so it is bottom justified
Height = -32 (leaving a 32 pixel margin)
Height Units = Relative to Container (so that it always has a 32 pixel margin regardless of parent size)
The green rectangle can be added as a child to the container, and then centered within the container. This results in the green rectangle always being centered within the area that leaves a 32 pixel margin at the top even if the main rectangle is resized, as shown in the following animation:
Additonal margin can also be added to the bottom by changing the container's Y value. For example, a 20 margin border can be added at the bottom, leaving a 32 pixel margin at the top by setting the following values on the container:
Y = -20 (move the bottom of the container up by 20 pixels)
Height = -52 (leaving a 32 pixel margin at the top, and accounting for the container being moved up an extra 20 pixels)
