Vertical Alignment

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

Class reference

Baseline

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

<span class="inline-block align-baseline ...">...</span>

Top

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

<span class="inline-block align-top ...">...</span>

Middle

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

<span class="inline-block align-middle ...">...</span>

Bottom

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

<span class="inline-block align-bottom ...">...</span>

Text Top

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

<span class="inline-block align-text-top ...">...</span>

Text Bottom

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

<span class="inline-block align-text-bottom ...">...</span>

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.

<div class="leading-none relative">
  <span class="align-top sm:align-middle md:align-bottom lg:align-text-top xl:align-text-bottom ...">...</span>
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</div>

Customizing

Responsive and pseudo-class variants

By default, only responsive variants are generated for vertical alignment utilities.

You can control which variants are generated for the vertical alignment utilities by modifying the verticalAlign property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

// tailwind.config.js
module.exports = {
 variants: {
    // ...
-   verticalAlign: ['responsive'],
+   verticalAlign: ['responsive', 'hover', 'focus'],
 }
}

Disabling

If you don’t plan to use the vertical alignment utilities in your project, you can disable them entirely by setting the verticalAlign property to false in the corePlugins section of your config file:

// tailwind.config.js
module.exports = {
 corePlugins: {
    // ...
+   verticalAlign: false,
 }
}