vertical-align

CSS Property Info :

CSS Browser Support :

Internet Explorer 4+
Netscape 6+
Opera 3.6+
W3C's CSS Level 1+
CSS Profile 1.0
Web TV

CSS Property Description :

The vertical-align property may be used to alter the vertical positioning of an inline element, relative to its parent element or to the element's line. (An inline element is one which has no line break before and after it, for example, EM, A, and IMG in HTML.)

The value may be a percentage relative to the element's line-height property, which would raise the element's baseline the specified amount above the parent's baseline. Negative values are permitted.

The value may also be a keyword. The following keywords affect the positioning relative to the parent element:

   baseline (align baselines of element and parent)
   middle (align vertical midpoint of element with baseline plus half the x-height--the height of the letter "x"--of the parent)
   sub (subscript)
   super (superscript)
   text-top (align tops of element and parent's font)
   text-bottom (align bottoms of element and parent's font)

The keywords affecting the positioning relative to the element's line are

   top (align top of element with tallest element on the line)
   bottom (align bottom of element with lowest element on the line)

The vertical-align property is particularly useful for aligning images. Some examples follow:

IMG.middle { vertical-align: middle }
IMG { vertical-align: 50% }
.exponent { vertical-align: super }

CSS Bugs / Problems :

none

Copyright © John Pozadzides and Liam Quinn. All rights reserved.