CSS/Properties/vertical-align

From W3C Wiki
Jump to: navigation, search

vertical-align

The vertical-align property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.

Description

Values baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
Initial value baseline
Applies to inline-level and 'table-cell' elements
Inherited No


Values

  • baseline
    Align the baseline of the box with the baseline of the parent box.


  • sub
    Lower the baseline of the box to the proper position for subscripts of the parent's box.


  • super
    Raise the baseline of the box to the proper position for superscripts of the parent's box.


  • top
    Align the top of the aligned subtree with the top of the line box.


  • text-top
    Align the top of the box with the top of the parent's content area


  • middle
    Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.


  • bottom
    Align the bottom of the aligned subtree with the bottom of the line box.


  • text-bottom
    Align the bottom of the box with the bottom of the parent's content area


  • <length>
    Raise (positive value) or lower (negative value) the box by this distance. The value '0cm' means the same as 'baseline'.


  • <percentage>
    Raise (positive value) or lower (negative value) the box by this distance (a percentage of the 'line-height' value). The value '0%' means the same as 'baseline'.


  • inherit
    Takes the same specified value as the property for the element's parent.


Example

Example A

[style.css]

 img {
   vertical-align: middle;
 }

[index.html]

<body>
  <p>This is a <img src="images/logo.png" alt="W3C"> Web site.</p>
</body>

Csslist2 vertical-align.png

CSS Reference

The CSS specification defines the vertical-align property in 10.8.1 Leading and half-leading.