Vertical Alignment

Baseline

Use align-baseline 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.

Middle

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

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.

Text Bottom

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

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.

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

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

Customizing

Variants

默認情況下, 只有 響應式 的 vertical-alignment 變化模式 (variants) 會產生。

在 tailwind.config.js 的 variants 區塊中變更 verticalAlign 屬性來決定有哪些變化模式會生成。

舉個例子來說，這個設定將會生成 響應式 和 hover 的變化模式。

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

Disabling

如果你不打算在專案中使用 vertical-alignment 功能，可以在你的設定檔裡的 corePlugins 屬性中將 verticalAlign 設定為 false 來停用功能：

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