Difference between revisions of "CSS GUIDE VERTICAL ALIGN"

From CDOT Wiki
Jump to: navigation, search
(→‎General usage)
(→‎Usage Examples)
Line 54: Line 54:
  
 
== Usage Examples ==
 
== Usage Examples ==
−
<pre>img{vertical-align:baseline} /*The element is placed on the baseline of the parent element*/</pre>
+
<pre>
−
<pre>img{vertical-align:sub} /*Aligns the element as it was subscript*/</pre>
+
img{vertical-align:baseline;}/*The element is placed on the baseline of the parent element*/
−
<pre>img{vertical-align:super} /*Aligns the element as it was superscript*/</pre>
+
</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>
−
<pre>img{vertical-align:text-top} /*The top of the element is aligned with the top of the parent element's font*/</pre>
+
img{vertical-align:sub}/*Aligns the element as it was subscript*/
−
<pre>img{vertical-align:middle} /*The element is placed in the middle of the parent element*/</pre>
+
</pre>
−
<pre>img{vertical-align:bottom} /*The bottom of the element is aligned with the lowest element on the line*/</pre>
+
<pre>
−
<pre>img{vertical-align:text-bottom} /*The bottom of the element is aligned with the bottom of the parent element's font*/</pre>
+
img{vertical-align:super}/*Aligns the element as it was superscript*/
−
<pre>img{vertical-align:length} </pre>  
+
</pre>
−
<pre>img{vertical-align:% } /*Aligns the element in a % value of the "line-height" property. Negative values are allowed*/</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: -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 ==
 
== Notes ==

Revision as of 13:04, 6 December 2006

This document is a work in progress and is subject to change.

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
    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

Usage Examples

img{vertical-align:baseline;}/*The element is placed on the baseline of the parent element*/

img{vertical-align:sub}/*Aligns the element as it was subscript*/

img{vertical-align:super}/*Aligns the element as it was superscript*/

img{vertical-align:top}/*The top of the element is aligned with the top of the tallest element on the line*/

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

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

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

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

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

See Also