Vertical-align

Set the vertical alignment of an element/image.

Syntax
      vertical-align:  length | percentage | baseline | bottom | middle | sub | super | text-bottom | text-top | top | inherit ;

length - A value in px, pt, em or % that will raise or lower the box position (negative values move down)
baseline - Align the baseline of the element with the baseline of the parent element. (default)
top - Align the top of the element with the top of the tallest element on the line.
bottom - Align the bottom of the element with the lowest element on the line.
middle - Place the element in the middle of the parent element.

super - Align the element as if it were a superscript.
sub - Align the element as if it were a subscript.
text-bottom - Align the bottom of the element with the bottom of the parent element's font.
text-top - Align the top of the element with the top of the parent element's font
inherit - inherit from the parent element.

vertical-align can be used to position images within a block of text, or to position text vertically within a table cell. For table cells only the options (top, bottom, middle, baseline) are valid. This is equivalent to the old valign property.

Examples:
h1 { vertical-align: 100px; }
.ss64class { vertical-align: middle; }

#SS64id { vertical-align: text-bottom; }
td {vertical-align: top;}

Try it:

When an image is placed sample image inline with text, you may wish to use CSS to adjust its vertical alignment. By default it will align with the bottom (baseline) of the text.

(CSS 1) Browser Support: All major browsers, IE 8+

“I'm a tidy sort of bloke. I don't like chaos. I kept records in the record rack, tea in the tea caddy, and pot in the pot box” ~ George Harrison

Related:

clip - Clip an absolutely positioned image/element.
text-align - Horizontal alignment of text.
box-align - Align the child elements of a box.
Background-Position - Starting position of a background image.
Centering in the Unknown - CSS Tricks


© Copyright SS64.com 1999-2014
Some rights reserved