::Stuff for the multi-spec coder;

Coding, formats, standards, and other practical things.

 Home  //  CSS  //  vertical-align 

<!-- CSS 2.1 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













Looking for the old guiStuff?

It's still here, the old content didn't go anywhere.