Vertical Alignment

@include('_partials.class-table', [ 'rows' => [ [ '.align-baseline', 'vertical-align: baseline;', "Align the baseline of an element with the baseline of its parent.", ], [ '.align-top', 'vertical-align: top;', "Align the top of an element and its descendants with the top of the entire line.", ], [ '.align-middle', 'vertical-align: middle;', "Align the middle of an element with the baseline plus half the x-height of the parent.", ], [ '.align-bottom', 'vertical-align: bottom;', "Align the bottom of an element and its descendants with the bottom of the entire line.", ], [ '.align-text-top', 'vertical-align: text-top;', "Align the top of an element with the top of the parent element's font.", ], [ '.align-text-bottom', 'vertical-align: text-bottom;', "Align the bottom of an element with the bottom of the parent element's font.", ], ] ])

Baseline

Use .align-baseline to align the baseline of an element with the baseline of its parent.

@component('_partials.code-sample')

@slot('code')...@endslot @endcomponent

Top

Use .align-top to align the top of an element and its descendants with the top of the entire line.

@component('_partials.code-sample')

@slot('code')...@endslot @endcomponent

Middle

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

@component('_partials.code-sample')

@slot('code')...@endslot @endcomponent

Bottom

Use .align-bottom to align the bottom of an element and its descendants with the bottom of the entire line.

@component('_partials.code-sample')

@slot('code')...@endslot @endcomponent

Text Top

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

@component('_partials.code-sample')

@slot('code')...@endslot @endcomponent

Text Bottom

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

@component('_partials.code-sample')

@slot('code')...@endslot @endcomponent

Responsive

To control the vertical alignment only at a specific breakpoint, add a {screen}: prefix to any existing vertical align utility. For example, adding the class md:align-top to an element would apply the align-top utility at medium screen sizes and above.

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

@component('_partials.responsive-code-sample') @slot('none')

@endslot @slot('sm')@endslot @slot('md')@endslot @slot('lg')@endslot @slot('xl')@endslot @slot('code')@endslot @endcomponent

Customizing

@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'vertical alignment', 'property' => 'verticalAlign', ], 'variants' => [ 'responsive', ], ])