CSS Properties

CSS Vertical Alignment

Setting the vertical position of the element within the parent is done with the vertical-align: property of an inline element.

Property Usage

vertical-align:value;

Default. the element is on the baseline of the parent

baseline;

Aligns the element as if it was subscript text

sub;

Aligns the element as if it was superscript text

super;

The top of the element is aligned with the top of the tallest element in the parent

top;

The top of the element is aligned with the top of the parent element's font

text-top;

The element is placed in the middle of the parent element

middle;

The bottom of the element is aligned with the lowest element on the line

bottom;

The bottom of the element is aligned with the bottom of the parent element's font

text-bottom;

Aligns the element in a % value of the "line-height" property. Negative values are allowed

nn%;

The vertical-align property is probably one of the most mis-understood CSS properties of all time. Many designers/developers expect to use it on any element and see the position of the item it is applied to change and are then at a loss as to why it isn't doing what it is supposed to!
Well it does work when used in the right place and in the correct context.

For Example: Malcom, in the middle!

ReeceMalcomDewey

CSS Code
span#brothers {
	border:1px solid green;
	font-size:6em;
	padding:0 5px;
}
span#malcom {
	vertical-align:middle;
	font-size:20%;
}

HTML Code

	<p>
<span id="brothers">Reece<span _ 
	id="malcom">Malcom</span>Dewey</span>
</p>

The reason many designers come to the conclusion that vertical-align doesn't appear to be supported is; They are using the wrong container element. Vertical-align ONLY applies to inline elements and is ignored when applied to block elements. So when they apply it to <div>'s or <li>'s etc, is it any suprise that it "doesn't work"?
In the example above the parent container id="brothers" is set with a large font at 6em. Then a child container id="malcom" is styled with vertical-align:middle; font-size:20%;. The use of 20% (1/5) is so that the text should be exactly in the middle (2/5ths above and 2/5ths below). So we end up with Malcom in the middle ( Sorry couldn't resist :-) ).

ReeceMalcomDewey

Display examples of the various values

Subscript and superscript are the CSS equivalents of the HTML tags <sub> & <sup>

SubscriptTextSuperscript

With percentage settings the bottom edge of the aligned element will be set the percentage above the bottom edge of the parent element. Using negative values for this will put the element below the

Text10%25%50%75%100%

Properties top and bottom on the other hand, align to the top of the tallest element and the bottom of the parent.

TopTextBottom

Text-top and text-bottom showing that even though the image is the tallest element the text is aligned to the parent text.

Text TopTextText Bottom

DHTML - Javascript Vertical Align

The vertical-align property can also be applied dynamically using javascript: