vertical-align
用于控制行内或表格单元格垂直对齐的工具类。
快速参考
| 类 | 属性 |
|---|---|
align-baseline | vertical-align: baseline; |
align-top | vertical-align: top; |
align-middle | vertical-align: middle; |
align-bottom | vertical-align: bottom; |
align-text-top | vertical-align: text-top; |
align-text-bottom | vertical-align: text-bottom; |
align-sub | vertical-align: sub; |
align-super | vertical-align: super; |
align-(<custom-property>) | vertical-align: var(<custom-property>); |
align-[<value>] | vertical-align: <value>; |
示例
对齐到基线
使用 align-baseline 工具类将元素的基线与其父元素的基线对齐：
The quick brown fox jumps over the lazy dog.
html
<!-- [!code classes:align-baseline] -->
<span class="inline-block align-baseline">The quick brown fox...</span>对齐到顶部
使用 align-top 工具类将元素及其后代的顶部与整行的顶部对齐：
The quick brown fox jumps over the lazy dog.
html
<!-- [!code classes:align-top] -->
<span class="inline-block align-top">The quick brown fox...</span>对齐到中间
使用 align-middle 工具类将元素的中部与父元素的基线加上一半 x-height 对齐：
The quick brown fox jumps over the lazy dog.
html
<!-- [!code classes:align-middle] -->
<span class="inline-block align-middle">The quick brown fox...</span>对齐到底部
使用 align-bottom 工具类将元素及其后代的底部与整行的底部对齐：
The quick brown fox jumps over the lazy dog.
html
<!-- [!code classes:align-bottom] -->
<span class="inline-block align-bottom">The quick brown fox...</span>对齐到父元素字体顶部
使用 align-text-top 工具类将元素的顶部与父元素字体的顶部对齐：
The quick brown fox jumps over the lazy dog.
html
<!-- [!code classes:align-text-top] -->
<span class="inline-block align-text-top">The quick brown fox...</span>对齐到父元素字体底部
使用 align-text-bottom 工具类将元素的底部与父元素字体的底部对齐：
The quick brown fox jumps over the lazy dog.
html
<!-- [!code classes:align-text-bottom] -->
<span class="inline-block align-text-bottom">The quick brown fox...</span>使用自定义值
使用 align-[<value>] 等工具类，根据完全自定义的值设置垂直对齐：
html
<span class="align-[4px] ...">
<!-- ... -->
</span>对于 CSS 变量，也可以使用 align-(<custom-property>) 语法：
html
<span class="align-(--my-alignment) ...">
<!-- ... -->
</span>这只是 align-[var(<custom-property>)] 的简写，会自动为你加上 var() 函数。
响应式设计
使用 md: 等断点变体作为 vertical-align 工具类的前缀，即可只在中等屏幕尺寸及以上应用该工具类：
html
<span class="align-middle md:align-top ...">
<!-- ... -->
</span>更多关于变体的用法，请参阅变体文档。