Vertical Alignment

Utilities for controlling the vertical alignment of an inline or table-cell box.

Baseline

Use verticalAlign="baseline" to align the baseline of an element with the baseline of its parent.

<x.span display="inline-block" verticalAlign="baseline">
  ...
</x.span>

Top

Use verticalAlign="top" to align the top of an element and its descendants with the top of the entire line.

<x.span display="inline-block" verticalAlign="top">
  ...
</x.span>

Middle

Use verticalAlign="middle" to align the middle of an element with the baseline plus half the x-height of the parent.

<x.span display="inline-block" verticalAlign="middle">
  ...
</x.span>

Bottom

Use verticalAlign="bottom to align the bottom of an element and its descendants with the bottom of the entire line.

<x.span display="inline-block" verticalAlign="bottom">
  ...
</x.span>

Text Top

Use verticalAlign="text-top" to align the top of an element with the top of the parent element's font.

<x.span display="inline-block" verticalAlign="text-top">
  ...
</x.span>

Text Bottom

Use verticalAlign="text-bottom" to align the bottom of an element with the bottom of the parent element's font.

<x.span display="inline-block" verticalAlign="text-bottom">
  ...
</x.span>

Responsive

To control the vertical alignment of an element at a specific breakpoint, use responsive object notation. For example, adding the property verticalAlign={{ md: "text-bottom" }} to an element would apply the verticalAlign="text-bottom" utility at medium screen sizes and above.

<x.div verticalAlign={{ md: 'text-bottom' }}>{/* ... */}</x.div>

For more information about xstyled's responsive design features, check out Responsive Design documentation.