VectorPaint alignment and distribution: arrange three button icons

English translation of the Chinese original, translated on 2026-10-23. The article body uses automated translation; app descriptions, historical reading notes and video subtitles receive separate editorial checks. Original publication dates, attribution, code and version notes are retained.

Use three different-width shapes to understand edge alignment, centring and equal distribution, distinguishing centre-to-centre distance from gaps between edges.

Prepare three objects of different widths

Create a landscape canvas of 720×360 px. Draw a circle about 100 wide, a rectangle about 140 wide, and a small motif about 80 wide. Keep their heights similar and place them near the canvas center. Their deliberately different widths reveal the distinction between evenly spaced centers and equal gaps between edges. Leave out text initially so glyphs' visual centers do not affect the first comparison.

Be clear about the alignment direction

For a horizontal row, vertical centering is usually the first step so that objects share the same up-down position. Use left alignment for a straight left edge. Direction names can confuse beginners: horizontal centering aligns left-right centers and may stack objects that were side by side. Decide whether you want a row or a column before acting, and retain a simple state you can undo to.

Select first, then check the alignment scope

Marquee-select the three target objects or select them individually, ensuring the background rectangle is excluded. Open Align and Distribute and inspect the alignment target shown in your version. If canvas, selection, or other references are offered, choose the appropriate scope. Do not click merely because you see “Center”: centering on the canvas and within the selected objects can produce different results. Set the reference before applying alignment in the intended direction.

Align the heights of a row first

Vertically center the three shapes and see whether their centerlines share one horizontal line. Zoom in to inspect the bounding boxes, then zoom out to compare visual weight. Even with identical mathematical centers, a circle and rectangle can appear offset because of their shapes and whitespace. Establish a stable geometric reference before making small manual adjustments rather than repeatedly dragging by intuition without a reference.

Position the two ends before distributing

Place the leftmost and rightmost objects at the intended limits, then select all three and distribute horizontally. Observe how the middle object moves and whether both ends still leave appropriate canvas margins. With equal widths, evenly spaced centers often produce similar edge gaps; different widths require a closer look at the gaps. Use fixed spacing if the interface offers it, or adjust the target gaps manually if it does not.

Understand spacing with a numerical example

Suppose three objects are 100, 140, and 80 wide, with two desired edge gaps of 32. The group's total width is 100＋140＋80＋32＋32＝384. Centered on a canvas 720 wide, it theoretically leaves 168 on each side. These are not mandatory values for every image; the calculation helps explain why one side may still look crowded after distribution.

Why are objects with strokes and text harder to align?

After practicing with the three plain shapes, add a stroke to the rectangle and place a short line of text beside it. You will notice that bounding boxes, visible glyphs, and visual weight do not coincide perfectly. Alignment tools standardize geometric relationships, but cannot judge how much blank space a glyph has on its left or know that a triangle looks sharper and lighter than a circle.

Start by aligning objects to a consistent reference, then inspect the result at its actual usage size. If text looks shifted to the right, check for leading spaces or generous blank space built into the font. If a shape looks too low, consider whether its bottom carries more visual weight. Make small optical adjustments only after ruling out obvious content problems, and retain an explanation for each adjustment.

For repeated buttons, distinguish the button area from its internal icon. Button areas can share dimensions and spacing while the icons receive appropriate optical size adjustments. Do not force a narrow shape wider merely to make every icon's bounding box equal. The layout should be consistent while each shape retains natural proportions.

Final checks and visual adjustments

At the actual display size, check that each object is distinguishable and that thick strokes or shadows do not consume the gaps. Compare the margins on both sides. Button icons also have internal whitespace: a very narrow icon may need different bounding-box treatment. Move the entire group once and undo to confirm that the selection is complete. Save the original and export a landscape preview as an arrangement reference.

Further exercise: compare two alignment references

Duplicate the three-object exercise. In the first version, keep the center distances similar; in the second, set the edge gaps to about 32. Compare the two side by side.
Add a thick stroke to the middle rectangle and check the visible gaps again to see the difference between geometric bounds and visual outer edges.
Rearrange the three objects vertically. Align their horizontal centers first, then distribute them vertically, avoiding the direction used for the horizontal row.

Frequently asked questions

What if alignment stacks all the objects on top of each other?

Undo and check whether both horizontal and vertical centering were applied, or whether you chose the wrong direction. A row usually needs only a shared vertical position; horizontal positions should be managed with distribution and margins.

Is it normal for equal spacing still to look uneven?

It can be normal. Object widths, strokes, and internal whitespace all affect perceived spacing. First confirm whether you are equalizing center distances or edge gaps, then make small optical corrections.

Can a hidden background serve as a reference?

Check your version's selection scope and alignment target first. Do not assume hidden or locked objects automatically participate in alignment. Explicitly set the target and observe which objects actually move.

Sources and scope

This article is based on VectorPaint App Store description and the available feature entry points; Apple’s public release information Checked on October 22, 2026, for version 1.0.7, requiring iOS / iPadOS 17.0 or later. The interface may vary by device and version. Dimensions, colours and wording are exercise suggestions; confirm the requirements for your actual use.