1
edit
Changes
→Vertical aligning <div> element
== 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.
===General usage===
== Legal Values ==
== 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>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>
===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 ==
