Vertical align

Syntax

Class
Properties
v-align-baseline
vertical-align: baseline;
v-align-top
vertical-align: top;
v-align-middle
vertical-align: middle;
v-align-bottom
vertical-align: bottom;
v-align-text-top
vertical-align: text-top;
v-align-text-bottom
vertical-align: text-bottom;
v-align-sub
vertical-align: sub;
v-align-super
vertical-align: super;
<div class="t1 w-256 h-128 bg-c-white shadow-4 p-18"> Lorem ipsum <span class="t1 inline-block w-8 h-8 bg-c-blue v-align-baseline"></span> dolor sit amet. </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Baseline
t1 v-align-baseline
.t1.v-align-baseline { vertical-align: baseline; }
Top
t1 v-align-top
.t1.v-align-top { vertical-align: top; }
Middle
t1 v-align-middle
.t1.v-align-middle { vertical-align: middle; }
Bottom
t1 v-align-bottom
.t1.v-align-bottom { vertical-align: bottom; }
Text-top
t1 v-align-text-top
.t1.v-align-text-top { vertical-align: text-top; }
Text-bottom
t1 v-align-text-bottom
.t1.v-align-text-bottom { vertical-align: text-bottom; }
Sub
t1 v-align-sub
.t1.v-align-sub { vertical-align: sub; }
Super
t1 v-align-super
.t1.v-align-super { vertical-align: super; }