CSS properties - vertical-align

revision:

vertical-align property

- sets the vertical alignment of an element.

CSS syntax : vertical-align: baseline | length | sub | super | top | text-top | middle | bottom | text-bottom |initial | inherit;

Property values:

baseline : the element is aligned with the baseline of the parent. This is default

length : raises or lower an element by the specified length. Negative values are allowed.

% : raises or lower an element by a percent of the "line-height" property. Negative values are allowed

sub : the element is aligned with the subscript baseline of the parent

super : the element is aligned with the superscript baseline of the parent

top : the element is aligned with the top of the tallest element on the line

text-top : the element is aligned with the top of the parent element's font

middle : the element is placed in the middle of the parent element

bottom : the element is aligned with the lowest element on the line

text-bottom : the element is aligned with the bottom of the parent element's font

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.verticalAlign="top"

example: vertical-align property

vertical-align: baseline (default):

An image with a default alignment.

vertical-align: text-top:

An image with a text-top alignment.

vertical-align: text-bottom:

An image with a text-bottom alignment.

vertical-align: sub:

An image with a sub alignment.

vertical-align: sup:

An image with a super alignment.

code: 
                    <div>
                        <h4>vertical-align: baseline (default):</h4>
                        <p>An <img class="a" src="../pics/sqpurple.gif" width="9" height="9"> image with a default alignment.</p> 
                        <h4>vertical-align: text-top:</h4>
                        <p>An <img class="b" src="../pics/sqpurple.gif" width="9" height="9"> image with a text-top alignment.</p> 
                        <h4>vertical-align: text-bottom:</h4>
                        <p>An <img class="c" src="../pics/sqpurple.gif" width="9" height="9"> image with a text-bottom alignment.</p>
                        <h4>vertical-align: sub:</h4>
                        <p>An <img class="d" src="../pics/sqpurple.gif" width="9" height="9"> image with a sub alignment.</p> 
                        <h4>vertical-align: sup:</h4>
                        <p>An <img class="e" src="../pics/sqpurple.gif" width="9" height="9"> image with a super alignment.</p>
                    </div>
                    <style>
                        img.a {vertical-align: baseline;}
                        img.b {vertical-align: text-top;}
                        img.c {vertical-align: text-bottom;}
                        img.d {vertical-align: sub;}
                        img.e {vertical-align: super;}
                    </style>