Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in /home/myscript/public_html/classes/classdb.php on line 42
CSS (HTML) Tutorial - Vertical aligning of text using style sheet

CSS Vertical Alignment

How to create a base text or power text?
How to create a subline or super text?

Explanation


Property :

Vertical Alignment

Usage:


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

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.

Ask Questions

Ask Question