Vertical Alignment

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

Default class reference

Baseline

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

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

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

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

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

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

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

1. <div class="relative">
2. <span class="align-middle md:align-top ...">...</span>
3. <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
4. </div>

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

Customizing

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:

1. // tailwind.config.js
2. module.exports = {
3. variants: {
4. extend: {
5. // ...
6. +       verticalAlign: ['hover', 'focus'],
7. }
8. }
9. }

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:

1. // tailwind.config.js
2. module.exports = {
3. corePlugins: {
4. // ...
5. +     verticalAlign: false,
6. }
7. }

←Text Overflow   Whitespace→