CSS vertical-align property

Property values

baselineDefault

The baseline of line box (other than the target line box) matches the baseline of the parent box.

vertical-align: baseline;

Try it { }

text-bottom

The bottom side of the line box (other than the target line box) matches with the bottom side of the parent box.

vertical-align: text-bottom;

Try it { }

middle

The line box (other than the target line box) is aligned at the middle (verticallly).

vertical-align: middle;

Try it { }

text-top

The top side of the line box (other than the target line box) matches with the top side of the parent box.

vertical-align: text-top;

Try it { }

top

The line-box (other than the target line box) is at the top side of the parent box.

vertical-align: top;

Try it { }

bottom

The line-box (other than the target line box) is at the top side of the parent box.

vertical-align: bottom;

Try it { }

+ve length

10

The line box (other than the target line box) moves downwards from the baseline by 10px.

vertical-align: 10px;

Try it { }

-ve length

-10

The line box (other than the target line box) moves upwards from the baseline by 10px.

vertical-align: -10px;

Try it { }

percentage

20

The line box (other than the target line box) moves upwards from the baseline by 20% of the height of the parent box.

vertical-align: 20%;

Try it { }

sub

In this case, the target line box is a subscript of the other text.

vertical-align: sub;

Try it { }

super

In this case, the target line box is a superscript of the other text.

vertical-align: super;

Try it { }