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.
<span class="inline-block align-baseline">The quick brown fox...</span>
对齐到顶部
使用 align-top 工具将元素及其后代的顶部与整行的顶部对齐：
The quick brown fox jumps over the lazy dog.
<span class="inline-block align-top">The quick brown fox...</span>
对齐到中间
使用 align-middle 工具将元素的中间与基线加上父元素 x 高度的一半对齐：
The quick brown fox jumps over the lazy dog.
<span class="inline-block align-middle">The quick brown fox...</span>
对齐到底部
使用 align-bottom 工具将元素及其后代的底部与整行的底部对齐：
The quick brown fox jumps over the lazy dog.
<span class="inline-block align-bottom">The quick brown fox...</span>
对齐到父元素顶部
使用 align-text-top 工具将元素的顶部与父元素字体的顶部对齐：
The quick brown fox jumps over the lazy dog.
<span class="inline-block align-text-top">The quick brown fox...</span>
对齐到父元素底部
使用 align-text-bottom 工具将元素的底部与父元素字体的底部对齐：
The quick brown fox jumps over the lazy dog.
<span class="inline-block align-text-bottom">The quick brown fox...</span>
使用自定义值
使用 align-[<value>] 语法来基于完全自定义的值设置 垂直对齐：
<span class="align-[4px] ...">
</span>
对于 CSS 变量，你还可以使用 align-(<custom-property>) 语法：
<span class="align-(--my-alignment) ...">
</span>
这只是 align-[var(<custom-property>)] 的一个简写形式，它会自动为你添加 var() 函数。
响应式设计
在 vertical-align 工具前加上像 md: 这样的断点变体，以便只在中等屏幕尺寸及以上应用该工具：
<span class="align-middle md:align-top ...">
</span>
在 变体文档 中了解更多关于使用变体的信息。