Vertical Align 垂直对齐

用于控制内联框或表格单元格的垂直对齐的实用工具。

Class	Properties

基本用法

Baseline 基线

使用 align-baseline 来将元素的基线与其父元素的基线对齐。

The quick brown fox jumps over the lazy dog.

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

Top 顶部

使用 align-top 来将元素及其后代的顶部与整行的顶部对齐。

The quick brown fox jumps over the lazy dog.

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

Middle 中间

使用 align-middle 来将元素的中线与父元素的基线加上半个 x-高度对齐。

The quick brown fox jumps over the lazy dog.

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

Bottom 底部

使用 align-bottom 来使元素及其后代元素的底部与整行的底部对齐。

The quick brown fox jumps over the lazy dog.

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

Text Top 顶部文本

使用 align-text-top 来使元素的顶部与父元素的字体顶部对齐。

The quick brown fox jumps over the lazy dog.

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

Text Bottom 文本底部

使用 align-text-bottom 将元素的底部与父元素的字体底部对齐。

The quick brown fox jumps over the lazy dog.

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

有条件地应用

悬停、焦点和其他状态

Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 hover:align-top 只在悬停时应用 align-top 实用程序。

<p class="align-middle hover:align-top">
  <!-- ... -->
</p>

有关所有可用状态修改器的完整列表，请查看悬停、焦点和其他状态文档。

断点和媒体查询

您还可以使用变体修饰符来针对响应式断点、深色模式、prefers-reduced-motion 等媒体查询进行定位。例如，使用 md:align-top 仅在中等屏幕尺寸及以上应用 align-top 实用程序。

<p class="align-middle md:align-top">
  <!-- ... -->
</p>

要了解更多信息，请查看有关响应式设计、深色模式和其他媒体查询修饰符的文档。

使用自定义值

任意值

如果您需要使用一个与主题无关的 vertical-align 值，可以使用方括号来根据任意值动态生成属性。

<p class="align-[4px]">
  <!-- ... -->
</p>

有关任意值支持的更多信息，请参阅任意值文档。