Difference between revisions of "CSS GUIDE VERTICAL ALIGN"
(→%) |
(→Vertical aligning <div> element) |
||
| (5 intermediate revisions by the same user not shown) | |||
| Line 20: | Line 20: | ||
== Syntax == | == Syntax == | ||
| − | ===Vertical aligning | + | ===Vertical aligning element=== |
| − | *Mozilla cannot do vertical-align for a | + | *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 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. | *The reason for this is that the vertical-align attribute only considers the alignment within the current line, not within the containing box. | ||
| Line 52: | Line 52: | ||
== Mozilla Recommended Values == | == Mozilla Recommended Values == | ||
| + | [http://developer.mozilla.org/en/docs/CSS:vertical-align MDC document on vertical-align] | ||
== Usage Examples == | == Usage Examples == | ||
| Line 68: | Line 69: | ||
===top=== | ===top=== | ||
<pre> | <pre> | ||
| − | + | /*The top of the element is aligned with the top of the tallest element on the line*/ | |
| + | img{vertical-align:top} | ||
</pre> | </pre> | ||
| + | |||
===text-top=== | ===text-top=== | ||
<pre> | <pre> | ||
| − | + | /*The top of the element is aligned with the top of the parent element's font*/ | |
| + | img{vertical-align:text-top} | ||
</pre> | </pre> | ||
| + | |||
===middle=== | ===middle=== | ||
<pre> | <pre> | ||
| Line 81: | Line 86: | ||
===bottom=== | ===bottom=== | ||
<pre> | <pre> | ||
| − | + | /*The bottom of the element is aligned with the lowest element on the line*/ | |
| + | img{vertical-align:bottom} | ||
</pre> | </pre> | ||
| + | |||
===text-bottom=== | ===text-bottom=== | ||
<pre> | <pre> | ||
| − | + | /*The bottom of the element is aligned with the bottom of the parent element's font*/ | |
| − | bottom of the parent element's font*/ | + | img{vertical-align:text-bottom} |
| + | |||
</pre> | </pre> | ||
Latest revision as of 13:12, 6 December 2006
This document is a work in progress and is subject to change.
Contents
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 (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.
| Applicability: | The vertical-align property can be used for all CSS elements. |
| Media Group: | Visual |
| Inherited: | No |
Syntax
Vertical aligning 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:
img { vertical-align: text-bottom; }
General usage
See 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 section for more details.
Mozilla Recommended Values
MDC document on vertical-align
Usage Examples
baseline
img{vertical-align:baseline;}/*The element is placed on the baseline of the parent element*/
sub
img{vertical-align:sub}/*Aligns the element as it was subscript*/
super
img{vertical-align:super}/*Aligns the element as it was superscript*/
top
/*The top of the element is aligned with the top of the tallest element on the line*/
img{vertical-align:top}
text-top
/*The top of the element is aligned with the top of the parent element's font*/
img{vertical-align:text-top}
middle
img{vertical-align:middle}/*The element is placed in the middle of the parent element*/
bottom
/*The bottom of the element is aligned with the lowest element on the line*/
img{vertical-align:bottom}
text-bottom
/*The bottom of the element is aligned with the bottom of the parent element's font*/
img{vertical-align:text-bottom}
length
img { vertical-align: -5px; }
img { vertical-align: 10mm; }
%
/*Aligns the element in a % value of the "line-height" property. Negative values are allowed*/
img{vertical-align: 125%;}
img { vertical-align: -50%; }
Notes
The World Wide Web Consortium (W3C) provides a free online CSS validation service.
Specification Conformance
Browser Compatibility
- Internet Explorer
- Firefox
- Opera
