Vertical Align

Set vertical alignment

Syntax

visual="align:[value]"

Values

Value	CSS Output	Description
baseline	vertical-align: baseline	Baseline
top	vertical-align: top	Top
middle	vertical-align: middle	Middle
bottom	vertical-align: bottom	Bottom
text-top	vertical-align: text-top	Text top
text-bottom	vertical-align: text-bottom	Text bottom
sub	vertical-align: sub	Subscript
super	vertical-align: super	Superscript

Examples

<img visual="align:middle">Vertically centered</img>

Preview

Vertical Align

visual="align:middle" - Align inline elements

topmiddlebottomBig

View Code

<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <span space="p:small" visual="bg:primary text:white rounded:small align:top">top</span>
  <span space="p:small" visual="bg:success text:white rounded:small align:middle">middle</span>
  <span space="p:small" visual="bg:warning text:black rounded:small align:bottom">bottom</span>
  <span visual="text-size:huge text:neutral-500">Big</span>
</div>