Vertical Box in Unreal Engine UI – Clean Rows with Centered Layouts

Learn the Vertical Box in Unreal Engine UMG. Stack elements vertically, center layouts with anchors, and combine vertical and horizontal panels for clean, scalable UI.

This is Rambod, and in this tutorial we’re covering the Vertical Box layout in Unreal Engine’s UMG system.

The Vertical Box is one of the core layout containers for UI — it lets you stack widgets top-to-bottom, distribute space evenly, and center everything precisely. By combining Vertical Boxes with Horizontal Boxes, you can create modular, responsive UI that scales well across resolutions.

1) Adding the Canvas Panel & Vertical Box

• Start by creating a Widget Blueprint.
• Drag a Canvas Panel as the root. This gives free positioning and acts as a flexible parent container.
• From the Palette, drag a Vertical Box into the Canvas.

Configure its placement:

• In the Details panel → Slot (Canvas Panel Slot):
  • Anchor → set to the center box in the grid.
  • Position X = 0, Position Y = 0
  • Size X = 500, Size Y = 600
  • Alignment X = 0.5, Y = 0.5

👉 This ensures the Vertical Box is centered on the screen both in position and pivot.

2) Creating Vertical Rows

• Drag in three Text widgets into the Vertical Box.
• Rename their content to:
  • Row One
  • Row Two
  • Row Three

Now we have three stacked elements.

Slot settings for equal distribution:

• Select each Text widget. In the Slot (Vertical Box Slot):
  • Size = Fill
  • Fill Ratio (Weight) = 1.0

This evenly splits the height between all rows (⅓ each).

3) Centering Content in Rows

• Still in the Slot settings, configure:
  • Horizontal Alignment = Center
  • Vertical Alignment = Center

Apply these to all three rows, ensuring the text is perfectly centered both horizontally and vertically.

4) Adding a Horizontal Box Inside the Vertical Box

To demonstrate nested layouts:

• Drag a Horizontal Box into the Vertical Box, placing it below Row Three.
• Inside the Horizontal Box, add three Text widgets. (They can remain as “Text Block” placeholders or renamed.)

Configure each Horizontal Box child:

• Size = Fill
• Fill Ratio = 1.0
• Horizontal Alignment = Center
• Vertical Alignment = Center

This evenly distributes the three text blocks across the row, centers their text, and makes them scale equally.

5) Rearranging Elements with Arrow Handles

• In the Designer viewport, select a widget inside the Vertical or Horizontal Box.
• Use the gray arrow buttons beside it to move it up or down (Vertical Box) or left or right (Horizontal Box).
• This lets you reorder elements visually without touching the hierarchy panel.

6) Recap of Key Concepts

We combined Vertical and Horizontal Boxes to create a clean, modular layout:

• Canvas Panel → gives absolute control and anchoring.
• Vertical Box → stacked rows with equal Fill and centered alignment.
• Text Rows → centered horizontally and vertically, evenly split using Fill Weight.
• Nested Horizontal Box → inline row of text blocks with equal Fill and centered alignment.
• Arrow Handles → quick rearrangement inside the editor.

💡 This layout pattern is ideal for menus, settings screens, modular HUDs, and responsive UIs.

Subtitle Expansion (Full Tutorial Flow)

“This is Rambod, Vertical Box in Unreal UI. Start with a Canvas Panel, drag in a Vertical Box, anchor it to the center, set X and Y to 0, size to 500×600, and alignment to 0.5×0.5. Add three text widgets as rows. Label them Row One, Row Two, Row Three. In slot settings, set Size=Fill and Weight=1.0 so each row takes equal space. Center the text horizontally and vertically for each. Now add a Horizontal Box below Row Three. Inside, place three text widgets. Set Size=Fill, Weight=1.0, and align center both ways. This creates a row of evenly spaced inline blocks. Use gray arrow buttons in the viewport to rearrange rows or inline elements visually. The result: a fully responsive layout combining vertical stacking and horizontal grouping, perfect for menus and UI systems.”

Wrap-Up

The Vertical Box is a cornerstone of UI layout in Unreal Engine. Combined with Fill/Auto sizing, alignment, and nested Horizontal Boxes, it lets you build clean, production-ready UI that adapts to screen changes.

👉 Watch the full tutorial here: YouTube Link
👉 Explore more UI tips: rambod.net
👉 Subscribe to Rambod Dev for the full Widget Blueprint series.