字体排版
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-(<自定义属性>) | vertical-align: var(<自定义属性>); |
align-[<值>] | vertical-align: <值>; |
示例
对齐到基线
使用 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-[<值>] 语法 来设置垂直对齐基于完全自定义的值
<span class="align-[4px] ..."> <!-- ... --></span>对于 CSS 变量，您也可以使用 align-(<自定义属性>) 语法
<span class="align-(--my-alignment) ..."> <!-- ... --></span>这只是 align-[var(<自定义属性>)] 的简写形式，会自动为您添加 var() 函数。
响应式设计
前缀一个 vertical-align 实用工具 使用诸如 md: 之类的断点变体，仅在中等 屏幕尺寸及以上应用该实用工具
<span class="align-middle md:align-top ..."> <!-- ... --></span>了解有关在变体文档中使用变体的更多信息。
