#vertical-align

#介绍

用于指定内联元件（text 子元件）的垂直对齐方式。

#使用示例

css-apisrc/vertical-align/App.tsx

预览

#语法

vertical-align: 10px;
vertical-align: 50%;
vertical-align: baseline;
vertical-align: middle;
vertical-align: center;
vertical-align: top;
vertical-align: bottom;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: super;
vertical-align: sub;

#取值

• <length> 支持 Lynx 中 length 写法，在垂直方向偏移 length 值，支持负值。

• <percent> 只有设置 line-height 值的百分比。

• baseline 基线对齐。

• middle 取所有 text 的最大 x-height，元件高度的一半对齐最大 x-height 的一半。

• center 元件高度的一半对齐行高的一半。

• top 元件的最顶部对齐行高最顶部。

• bottom 元件最底部对齐行高最底部。

• text-top 取所有 text 的最大 ascent，元件最顶部对齐最大 ascent。

• text-bottom 取所有 text 的最大 descent，元件最底部对齐最大 descent。

• super 向上偏移当前元件高度的 10%。

• sub 向下偏移当前元件高度的 10%。

• 默认值 baseline

#形式定义

#形式语法

<length> | <percent> | baseline | middle | center | top | bottom | text-top | text-bottom | super | sub

#与 Web 的区别

• mdn:vertical-align

#注意事项

• text 元件嵌套 view 时默认文本基线对齐 view 的底部，需在 view 上显式设置 vertical-align-baseline 才能保证文本基线对齐 view 中文本基线。

#兼容性