CSS 2.1 Complete Reference

Property Name: vertical-align

Default Value: baseline
Inherited: no
Possible values directly from the standard:

baseline, sub, super, top, text-top, middle, bottom, text-bottom, percentage, length, inherit

Property Description:

Specifies how box elements within a line box (the elements that make up one line of inline content) are aligned vertically. Normally content is centered, with the line-height property value split equally between top and bottom to expand the vertical height. This property's name may be misleading, as it does not align a whole element within its containing block; rather, it specifies how sub-boxes that make up a line of boxes are aligned within that line (which is called the 'line box'). Understanding the Box Model is generally required to properly implement this property. Here are the options for vertical alignment:

baseline - (Default) Aligns the baseline of the element with the baseline of the parent box.
middle - Aligns the vertical midpoint of the box with the baseline of the parent box, plus half of the 'x-height' of the parent.
sub - Lower the baseline of the box to the proper position for subscripts of the parent's box (does not effect the size of text contained within the element).
super - Raise the baseline of the box to the proper position for superscripts of the parent's box (does not effect the size of text contained within the element).
text-top - Align the top of the box with the top of the parent's content area.
text-bottom - Align the bottom of the box with the bottom of the parent's content area.
percentage/length - Raise or lower the box by this distance. If a percentage value is used, it refers to the line-height's value. The baseline value would be the same as 0% or 0px.
inherit - Inherits the value from the parent element.

Example:

p strong { font-size: 0.5em; vertical-align: text-top; }

Complete CSS Property Listing:
background-attachment, background-color, background-image, background-position, background-repeat, background, border-collapse, border-color, border-spacing, border-style, border-top, border-right, border-bottom, border-left, border-top-color, border-right-color, border-bottom-color, border-left-color, border-top-style, border-right-style, border-bottom-style, border-left-style, border-top-width, border-right-width, border-bottom-width, border-left-width, border-width, border, bottom, caption-side, clear, clip, color, content, counter-increment, counter-reset, cursor, direction, display, empty-cells, float, font-family, font-size, font-style, font-variant, font-weight, font, height, left, letter-spacing, line-height, list-style-image, list-style-position, list-style-type, list-style, margin-top, margin-right, margin-bottom, margin-left, margin, max-height, max-width, min-height, min-width, outline-color, outline-style, outline-width, outline, overflow, padding-top, padding-right, padding-bottom, padding-left, padding, position, quotes, right, table-layout, text-align, text-decoration, text-indent, text-transform, top, unicode-bidi, vertical-align, visibility, white-space, width, word-spacing, z-index

Home
Profile
Blog
Contact

Web Services
CSS 2.1 Reference

About me

I am a freelance designer with over 7 years experience within the Web design, Web Developement & Online Marketing industry. I was a founding director and designer at Filance, one of UAE's leading creative agencies for 4 years, an experience which was great fun and broadened my expertise immensely.

This portfolio contains a selection of my work during this time.

If you're looking for a hard working, skilled, and very down-to-Earth designer then look no further.

Contact me about a design project

CSS 2.1 Complete Reference

Property Name: vertical-align

About me

BlogRoll