「及時」模式:全新世代的 Tailwind CSS
Tailwind CSS on GitHub

Vertical Alignment

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

Default class reference

Class
屬性
align-baselinevertical-align: baseline;
align-topvertical-align: top;
align-middlevertical-align: middle;
align-bottomvertical-align: bottom;
align-text-topvertical-align: text-top;
align-text-bottomvertical-align: text-bottom;

Baseline

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

The quick brown fox jumps over the lazy dog.
<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.

The quick brown fox jumps over the lazy dog.
<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.

The quick brown fox jumps over the lazy dog.
<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.

The quick brown fox jumps over the lazy dog.
<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.

The quick brown fox jumps over the lazy dog.
<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.

The quick brown fox jumps over the lazy dog.
<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.

<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.jsvariants 區塊中變更 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,
    }
  }