Changes

Jump to: navigation, search

CSS GUIDE VERTICAL ALIGN

96 bytes added, 14:12, 6 December 2006
Vertical aligning <div> element
== Syntax ==
===Vertical aligning <div> 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.
== Mozilla Recommended Values ==
[http://developer.mozilla.org/en/docs/CSS:vertical-align MDC document on vertical-align]
== Usage Examples ==
===top===
<pre>
img{vertical-align:top}/*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>
img{vertical-align:text-top}/*The top of the element is aligned with the top of the parent element's font*/img{vertical-align:text-top}
</pre>
 
===middle===
<pre>
===bottom===
<pre>
img{vertical-align:bottom}/*The bottom of the element is aligned with the lowest element on the line*/img{vertical-align:bottom}
</pre>
 
===text-bottom===
<pre>
img{vertical-align:text-bottom}/*The bottom of the element is aligned with the bottom of the parent element's font*/img{vertical-align:text-bottom} 
</pre>
1
edit

Navigation menu