Skip to main content

Enumeration: TextVerticalAlign

Defines vertical alignment options for text content.

This enum specifies how text should be positioned vertically within its containing element or area. The vertical alignment affects the visual relationship between the text and its container, influencing both aesthetics and readability.

Proper vertical alignment is particularly important in layouts where text needs to maintain a specific relationship with surrounding elements or when text containers have a fixed height that differs from the text content.

Enumeration Members​

BOTTOM​

BOTTOM: "BOTTOM"

Align text to the bottom of the container.

BOTTOM alignment positions text at the lower boundary of its containing element, with the last line of text at the bottom and preceding lines positioned above. This creates maximum space above the text.

This alignment is optimal for:

  • Captions or descriptions below images or content
  • When the end of the text is most important
  • Maintaining a consistent relationship with elements below
  • Creating visual hierarchy with other elements above
  • Interfaces where the bottom position has special significance

BOTTOM alignment is less common in general interfaces but very useful for specific layout requirements like captions or footer elements.

MIDDLE​

MIDDLE: "MIDDLE"

Align text to the vertical center of the container.

MIDDLE alignment positions text at the vertical center of its containing element, creating equal space above the first line and below the last line. The text block as a whole is centered relative to the container height.

This alignment is optimal for:

  • Creating visual balance in fixed-height elements
  • Text paired with vertically centered icons or elements
  • Single lines of text in buttons, tabs, or navigation items
  • Formal or symmetrical layouts where balance is important
  • Cards, panels, or containers with fixed proportions

MIDDLE alignment creates a more formal, balanced appearance and works best when the container height is fixed and known.

TOP​

TOP: "TOP"

Align text to the top of the container.

TOP alignment positions text at the upper boundary of its containing element, with the first line of text at the top and subsequent lines flowing downward. This creates maximum space below the text.

This alignment is optimal for:

  • Content where the beginning of the text is most important
  • Containers with variable or unpredictable heights
  • When text needs to establish a consistent starting position
  • Creating visual hierarchy with other elements below
  • Cases where text might be truncated at the bottom

TOP alignment is the most natural and widely used vertical position for text in most interfaces and layouts.