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.

<> <template preview> <x.div lineHeight="none" position="relative"> <x.span w={0} h={8} display="inline-block" verticalAlign="baseline"> <x.span position="absolute" top={0} borderColor="light-blue-300" borderStyle="dashed" borderWidth="1 0" w={1} h={8} /> <x.span position="absolute" top={0} borderColor="light-blue-300" borderStyle="dashed" borderWidth="1 0" w={1} h={4} /> </x.span> <x.span position="relative" zIndex={10} color="light-blue-700" fontWeight="medium" > Computers have lots of memory but no imagination. </x.span> </x.div> </template> <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.

<> <template preview> <x.div lineHeight="none" position="relative"> <x.span w={0} h={8} display="inline-block" verticalAlign="top"> <x.span position="absolute" top={0} borderColor="emerald-300" borderStyle="dashed" borderWidth="1 0" w={1} h={8} /> <x.span position="absolute" top={0} borderColor="emerald-300" borderStyle="dashed" borderWidth="1 0" w={1} h={4} /> </x.span> <x.span position="relative" zIndex={10} color="emerald-700" fontWeight="medium" > Computers have lots of memory but no imagination. </x.span> </x.div> </template> <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.

<> <template preview> <x.div lineHeight="none" position="relative"> <x.span w={0} h={8} display="inline-block" verticalAlign="middle"> <x.span position="absolute" top={0} borderColor="purple-300" borderStyle="dashed" borderWidth="1 0" w={1} h={8} /> <x.span position="absolute" top={0} borderColor="purple-300" borderStyle="dashed" borderWidth="1 0" w={1} h={4} /> </x.span> <x.span position="relative" zIndex={10} color="purple-700" fontWeight="medium" > Computers have lots of memory but no imagination. </x.span> </x.div> </template> <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.

<> <template preview> <x.div lineHeight="none" position="relative"> <x.span w={0} h={8} display="inline-block" verticalAlign="bottom"> <x.span position="absolute" top={0} borderColor="red-300" borderStyle="dashed" borderWidth="1 0" w={1} h={8} /> <x.span position="absolute" top={0} borderColor="red-300" borderStyle="dashed" borderWidth="1 0" w={1} h={4} /> </x.span> <x.span position="relative" zIndex={10} color="red-700" fontWeight="medium" > Computers have lots of memory but no imagination. </x.span> </x.div> </template> <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.

<> <template preview> <x.div lineHeight="none" position="relative"> <x.span w={0} h={8} display="inline-block" verticalAlign="text-top"> <x.span position="absolute" top={0} borderColor="amber-300" borderStyle="dashed" borderWidth="1 0" w={1} h={8} /> <x.span position="absolute" top={0} borderColor="amber-300" borderStyle="dashed" borderWidth="1 0" w={1} h={4} /> </x.span> <x.span position="relative" zIndex={10} color="amber-700" fontWeight="medium" > Computers have lots of memory but no imagination. </x.span> </x.div> </template> <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.

<> <template preview> <x.div lineHeight="none" position="relative"> <x.span w={0} h={8} display="inline-block" verticalAlign="text-bottom"> <x.span position="absolute" top={0} borderColor="pink-300" borderStyle="dashed" borderWidth="1 0" w={1} h={8} /> <x.span position="absolute" top={0} borderColor="pink-300" borderStyle="dashed" borderWidth="1 0" w={1} h={4} /> </x.span> <x.span position="relative" zIndex={10} color="pink-700" fontWeight="medium" > Computers have lots of memory but no imagination. </x.span> </x.div> </template> <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