Vertical Alignment

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

React propsCSS Properties
verticalAlign={value}vertical-align: {value};

Baseline

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

Computers have lots of memory but no imagination.
<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.

Computers have lots of memory but no imagination.
<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.

Computers have lots of memory but no imagination.
<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.

Computers have lots of memory but no imagination.
<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.

Computers have lots of memory but no imagination.
<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.

Computers have lots of memory but no imagination.
<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.

Edit this page on GitHub