vertical-align#

#Introduction

The vertical-align property sets vertical alignment of inline element.

#Examples

css-apisrc/vertical-align/App.tsx

Preview

#Syntax

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;

#Values

• <length> support length in Lynx,aligns the baseline of the element to the given length above the initial baseline,a negative value is allowed.

• <percent> Shift a percentage of the line-height,a negative value is allowed.

• baseline Aligns the baseline of element with the baseline of line.

• middle Get max x-height of all of text,aligns the middle of element with the position of half max x-height.

• center Aligns the middle of the element with the middle of line.

• top Aligns the top of the element with the top of line.

• bottom Aligns the bottom of the element with the bottom of line.

• text-top Get max ascent of all of text,aligns the top of element with the position of max ascent.

• text-bottom Get max descent of all of text,aligns the bottom of element with the position of max descent.

• super Upward shift 10% of the element's height.

• sub Downward shift 10% of the element's height.

• default value baseline

#Formal definition

#Formal syntax

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

#Difference with Web

• mdn:vertical-align

#Notes

• When the'text 'element nests the'view', the default text baseline is aligned to the bottom of the'view ', and the 'vertical-align-baseline' needs to be explicitly set on the'view 'to ensure that the text baseline is aligned to the'view' text baseline.

#Compatibility

Loading...