CSS Vertical Alignment
How to create a base text or power text?
How to create a subline or super text?
Explanation
Property :
Vertical AlignmentUsage:
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: 50%;
vertical-align: pt | px | cm;
Definition:
Using this attribute we can decorate out text. To create base and power text.
It takes the following values.
a)baseline : This text will be shown normal.
b)sub : This text will be shown as a sub text. It will lie beneath / below normal text.
c)super : This text will be shown as a super text. It will lie above normal text level.
d)% : The value can be set in percentage as 50%, etc...
e)pt | px | cm : The value can be set in points or pixels or cm
It takes the following values.
a)baseline : This text will be shown normal.
b)sub : This text will be shown as a sub text. It will lie beneath / below normal text.
c)super : This text will be shown as a super text. It will lie above normal text level.
d)% : The value can be set in percentage as 50%, etc...
e)pt | px | cm : The value can be set in points or pixels or cm
Example 1:
The following is a <font style="vertical-align: baseline;"> Inline Text </font> Example.
Result:
The following is a Inline Text Example.
Example 2:
The following is a <font style="vertical-align: sub;"> Sub line Text </font> Example.
Result:
The following is a Sub line Text Example.
Example 3:
The following is a <font style="vertical-align: super;"> Supper Line Text </font> Example.
Result:
The following is a Super Line Text Example.
Example 4:
The following is a <font style="vertical-align: -10px;"> Pixel </font> Example.
Result:
The following is a Pixel Example.
Note: To get subline text we have to set values in negative. This rule is same for %,pt and cm. In the above example instead of px we can use pt(points) or cm(centimeters) or % (percentage) based values too.
