Vertical Alignment

Baseline

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

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>

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.

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>

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 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 documentation.

all

sm

lg

xl

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Customizing

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', '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,
    }