Aligning Text Vertically part 2

• COURSES
• CODE PLAYGROUND
• DISCUSS
• TOP LEARNERS

Aligning Text Vertically

68

2/3

     

The vertical-align Property

The vertical-align property also takes the following values: baseline, sub, super, % and px (or pt, cm). 
The example below shows the difference between them. 

The HTML:<p>This is an <span class="baseline">inline text</span> example.</p>
<p>This is a <span class="sub">sub line text</span> example.</p>
<p> This is a <span class="super">super line text</span> example.</p>
<p> This is a <span class="pixel">pixel</span> example.</p>
The CSS:

span.baseline {
vertical-align: baseline;
}
span.sub {
vertical-align: sub;
}
span.super {
vertical-align: super;
}
span.pixel {
vertical-align: -10px;
}Try It Yourself

Result:
Instead of px values, you can use pt(points), cm (centimeters) and %(percentage) values.