Lynx
指引
API
博客
贡献
指引
API
博客
贡献
简体中文

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

形式定义

初始值baseline
适用元素嵌套 text、嵌套 image、嵌套 view
是否支持继承no
是否支持动画no

形式语法

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

与 Web 的区别

注意事项

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

兼容性

LCD tables only load in the browser

除非另有说明，本项目采用知识共享署名 4.0 国际许可协议进行许可，代码示例采用 Apache License 2.0 许可协议进行许可。