1
edit
Changes
no edit summary
<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 <div> element===
*Mozilla cannot do vertical-align for a <div> 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===
<pre>
</pre>
== 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 ==
== Usage Examples ==
<pre>img{vertical-align:baseline} /*The element is placed on the baseline of the parent element*/</pre>
<pre>img{vertical-align:sub} /*Aligns the element as it was subscript*/</pre>
<pre>img{vertical-align:super} /*Aligns the element as it was superscript*/</pre>
<pre>img{vertical-align:top} /*The top of the element is aligned with the top of the tallest element on the line*/</pre>
<pre>img{vertical-align:text-top} /*The top of the element is aligned with the top of the parent element's font*/</pre>
<pre>img{vertical-align:middle} /*The element is placed in the middle of the parent element*/</pre>
<pre>img{vertical-align:bottom} /*The bottom of the element is aligned with the lowest element on the line*/</pre>
<pre>img{vertical-align:text-bottom} /*The bottom of the element is aligned with the bottom of the parent element's font*/</pre>
<pre>img{vertical-align:length} </pre>
<pre>img{vertical-align:% } /*Aligns the element in a % value of the "line-height" property. Negative values are allowed*/</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]
== 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 <div> element===
*Mozilla cannot do vertical-align for a <div> 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===
<pre>
</pre>
== 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 ==
== Usage Examples ==
<pre>img{vertical-align:baseline} /*The element is placed on the baseline of the parent element*/</pre>
<pre>img{vertical-align:sub} /*Aligns the element as it was subscript*/</pre>
<pre>img{vertical-align:super} /*Aligns the element as it was superscript*/</pre>
<pre>img{vertical-align:top} /*The top of the element is aligned with the top of the tallest element on the line*/</pre>
<pre>img{vertical-align:text-top} /*The top of the element is aligned with the top of the parent element's font*/</pre>
<pre>img{vertical-align:middle} /*The element is placed in the middle of the parent element*/</pre>
<pre>img{vertical-align:bottom} /*The bottom of the element is aligned with the lowest element on the line*/</pre>
<pre>img{vertical-align:text-bottom} /*The bottom of the element is aligned with the bottom of the parent element's font*/</pre>
<pre>img{vertical-align:length} </pre>
<pre>img{vertical-align:% } /*Aligns the element in a % value of the "line-height" property. Negative values are allowed*/</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]