<html>
<link rel="stylesheet" href="josh.css">
<body bgcolor="#FFFFFF">
<div id="Description">
			<table cellpadding="0" cellspacing="0" border="0" width="100%" class="main">
				<tr><td valign="top" class="name">vertical-align</td><td valign="top" nowrap class="compatibility">NN <span class="emphasis">6</span> IE <span class="emphasis">4</span> CSS <span class="emphasis">1</span></td>
				</tr>
				<tr>
					<td colspan="2" class="divider"><img src="dwres:18084" width="100%" height="1"></td>
				</tr>
				<tr>
					<td valign="top" nowrap class="usage"><p class="literal"></p>
					</td><td valign="top" nowrap class="requirements">Inherited: No</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="description"><p>There are two sets of values for this attribute, and they affect
different characteristics of the inline element to which they are
applied. The major point of reference is that an inline element has
its own line box to hold its content. Two values,
<span class="literal">top</span> and <span class="literal">bottom</span>, affect how the
text is rendered within the line box. The settings bring the text
flush with the top or bottom of the box, respectively.
</p><p>Application of this attribute is not limited to inline spans of text.
Images and tables can use this style attribute. All other settings
for <span class="literal">vertical-align</span> affect how the entire element
box is vertically positioned relative to text content of the parent
element. The default value, <span class="literal">baseline</span>, means that
the line box is positioned such that the baselines of both the line
box's text (or very bottom of an element such as an
<span class="literal">img</span>) and the parent text are even.
That's how an <span class="literal">em</span> element can be
its own line box element but still look as though it flows on the
same baseline as its containing <span class="literal">p</span> element. The
rest of the attribute's constant values (and
percentage or length) determine where the element's
line box is set with respect to the parent line. A positive
percentage or length value positions the element the stated distance
above the baseline; a negative value positions the element below the
baseline. Percentages are calculated with respect to the line height.
</p>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="csssyntax"><span class="title">CSS Syntax</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td><span class="programlisting"><pre>vertical-align: <span class="replaceable">vertAlignType</span> | <span class="replaceable">length</span> | <span class="replaceable">percentage</span></pre>
						</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="value"><span class="title">Value</span></td>
				</tr>
				<tr>
					<td><p>Two constant values apply to alignment of text within the element
itself: <span class="literal">bottom</span> | <span class="literal">top</span>.
</p><p>Six constant values apply to alignment of the
element's line box relative to the surrounding text
line (of the parent element): <span class="literal">baseline</span> |
<span class="literal">middle</span> | <span class="literal">sub</span> |
<span class="literal">super</span> | <span class="literal">text-bottom</span> |
<span class="literal">text-top</span>. A value of <span class="literal">baseline</span>
keeps the baseline of the element and parent element line even. A
value of <span class="literal">middle</span> aligns the vertical midpoint of
the element with the baseline plus one-half the x-height of the
parent element's font. Values of
<span class="literal">sub</span> and <span class="literal">super</span> shift the element
into position for subscript and superscript but do not by themselves
create a true subscript or superscript in that no adjustment to the
font size is made with this attribute. A value of
<span class="literal">text-bottom</span> aligns the bottom of the element with
the bottom of the font line of the parent element text; a value of
<span class="literal">text-top</span> does the same with the tops of the
element and parent.
</p>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="initvalue"><span class="title">Initial Value</span></td>
				</tr>
				<tr>
					<td><p><span class="literal">baseline</span></p>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="example"><span class="title">Example</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td><span class="programlisting"><pre>span.sup {vertical-align: super; text-size: smaller}</pre>
						</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="appliesto"><span class="title">Applies To</span></td>
				</tr>
				<tr>
					<td><p>Inline elements only.</p>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="objectmodelreference"><span class="title">Object Model Reference</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td><span class="programlisting"><pre>[window.]document.getElementById("<span class="replaceable">elementID</span>").style.verticalAlign</pre>
						</span></td>
				</tr>
			</table>
		</div>
</body>
</html>