View source for CSS GUIDE VERTICAL ALIGN

<span style="margin:0;background:#ffff33;font-size:120%;font-weight:bold;border:1px solid #a3b0bf;text-align:left;color:#000;padding:0.2em 0.4em;">This document is a work in progress and is subject to change.</span><br /><br />
== Summary ==

The vertical-align property affects the vertical inside a line box of the boxes generated by an inline-level element. The following values only affect a parent inline-level element, or to a parent block-level element. If that element generates anonymous inline boxes ([http://www.w3.org/TR/REC-CSS2/visuren.html#anonymous refer to this]), they have no effect if no such parent exists. 

Vertical-align attribute only considers the alignment within the current line, not within the containing box.   

<table border="0">
<tr>
<td><b>Applicability:</b></td><td>The vertical-align property can be used for all CSS elements.</td>
</tr>
<tr>
<td><b>[http://developer.mozilla.org/en/docs/CSS:%40media#Media_groups Media Group:]</b>
</td><td>Visual</td>
</tr>
<tr>
<td><b>Inherited:</b></td><td>No</td>
</tr>
</table>

== Syntax ==
===Vertical aligning element=== 
*Mozilla cannot do vertical-align for a &lt;div&gt; element. 
*The only way to get mozilla to put something in the middle of a containing box vertically is to use a table cell or set the padding top and bottom to be equal or to make the line-height equal to the height of the containing box and then use vertical-align: middle (this last way required the content to be only a single line). 
*The reason for this is that the vertical-align attribute only considers the alignment within the current line, not within the containing box.

===Vertical aligning images===
*Mozilla aligns images differently then old browsers, in order to be in compliance with the W3C specifications. When placing an image inside of a box, padding appears below the image. The gap you're seeing is space that's reserved for the descenders in text. 
*Mozilla places images on the baseline, so the descender space is visible as a few-pixel gap underneath the image. 
*Mozilla recommends that you use this CSS rule:
<pre>
img { vertical-align: text-bottom; }
</pre>

===General usage===
See [[#Usage Examples | usage examples]] section for more details.

== Legal Values ==
The following units are valid for defining vertical-align: 
*baseline
*sub
*super
*top
*text-top
*middle
*bottom
*text-bottom
*length
*%

See [[#Usage Examples | usage examples]] section for more details.

== Mozilla Recommended Values ==
[http://developer.mozilla.org/en/docs/CSS:vertical-align MDC document on vertical-align]

== Usage Examples ==
===baseline===
<pre>
img{vertical-align:baseline;}/*The element is placed on the baseline of the parent element*/
</pre>
===sub===
<pre>
img{vertical-align:sub}/*Aligns the element as it was subscript*/
</pre>
===super===
<pre>
img{vertical-align:super}/*Aligns the element as it was superscript*/
</pre>
===top===
<pre>
/*The top of the element is aligned with the top of the tallest element on the line*/
img{vertical-align:top}
</pre>

===text-top===
<pre>
/*The top of the element is aligned with the top of the parent element's font*/
img{vertical-align:text-top}
</pre>

===middle===
<pre>
img{vertical-align:middle}/*The element is placed in the middle of the parent element*/
</pre>

===bottom===
<pre>
/*The bottom of the element is aligned with the lowest element on the line*/
img{vertical-align:bottom}
</pre>

===text-bottom===
<pre>
/*The bottom of the element is aligned with the bottom of the parent element's font*/
img{vertical-align:text-bottom}

</pre>

===length===
<pre>
img { vertical-align: -5px; }
img { vertical-align: 10mm; } 
</pre>
===%=== 
<pre>
/*Aligns the element in a % value of the "line-height" property. Negative values are allowed*/
img{vertical-align: 125%;}
img { vertical-align: -50%; } 
</pre>

== Notes ==
The [http://www.w3.org World Wide Web Consortium (W3C)] provides a free online [http://jigsaw.w3.org/css-validator/ CSS validation service].

== Specification Conformance  ==
*[http://www.w3.org/TR/REC-CSS1#vertical-align CSS 1 ]
*[http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align CSS 2]
*CSS 3 (specification not yet published)

== Browser Compatibility ==
* Internet Explorer
* Firefox
* Opera

== See Also ==
* [http://www.w3schools.com/css/pr_pos_vertical-align.asp CSS Vertical-align Property]