排版
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>; |
示例(Examples)
¥Examples
对齐基线(Aligning to baseline)
¥Aligning to baseline
使用 align-baseline 工具将元素的基线与其父级的基线对齐：
¥Use the align-baseline utility to align the baseline of an element with the baseline of its parent:
<span class="inline-block align-baseline">The quick brown fox...</span>对齐顶部(Aligning to top)
¥Aligning to top
使用 align-top 工具将元素及其后代的顶部与整行的顶部对齐：
¥Use the align-top utility to align the top of an element and its descendants with the top of the entire line:
<span class="inline-block align-top">The quick brown fox...</span>对齐中间(Aligning to middle)
¥Aligning to middle
使用 align-middle 工具将元素的中间与基线加上父元素 x 高度的一半对齐：
¥Use the align-middle utility to align the middle of an element with the baseline plus half the x-height of the parent:
<span class="inline-block align-middle">The quick brown fox...</span>对齐底部(Aligning to bottom)
¥Aligning to bottom
使用 align-bottom 工具将元素及其后代的底部与整行的底部对齐：
¥Use the align-bottom utility to align the bottom of an element and its descendants with the bottom of the entire line:
<span class="inline-block align-bottom">The quick brown fox...</span>对齐父元素顶部(Aligning to parent top)
¥Aligning to parent top
使用 align-text-top 工具将元素的顶部与父元素字体的顶部对齐：
¥Use the align-text-top utility to align the top of an element with the top of the parent element's font:
<span class="inline-block align-text-top">The quick brown fox...</span>对齐父元素底部(Aligning to parent bottom)
¥Aligning to parent bottom
使用 align-text-bottom 工具将元素的底部与父元素字体的底部对齐：
¥Use the align-text-bottom utility to align the bottom of an element with the bottom of the parent element's font:
<span class="inline-block align-text-bottom">The quick brown fox...</span>使用自定义值(Using a custom value)
¥Using a custom value
使用 align-[<value>] 语法 根据完全自定义的值设置 vertical alignment：
<span class="align-[4px] ..."> <!-- ... --></span>对于 CSS 变量，还可以使用 align-(<custom-property>) 语法：
<span class="align-(--my-alignment) ..."> <!-- ... --></span>这只是简写，用于 align-[var(<custom-property>)] 它会自动为你添加 var() 函数。
响应式设计(Responsive design)
¥Responsive design
在 vertical-align 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<span class="align-middle md:align-top ..."> <!-- ... --></span>请参阅 变体文档 详细了解如何使用变体。