CSS Reference Manual

CSS @rules (RULES)

Complete List of CSS Properties

CSS visibility attribute CSS unicode-bidi attribute

CSS vertical-Usage and examples of align property

vertical-Controlled by the align CSS propertyInline levelThe box generated by the element (usually text and images) is relative toBlock levelThe vertical alignment of the text baseline or the table cell in a line

The following table provides usage instructions and version history of this property, as well as the syntax of its use in JavaScript scripts.

Default value:	baseline
Applies to:	Inline level and table cell elements
Inheritance:	None
Animatable:	Yes.Please refer to Animation properties.
Version:	CSS 1,2,3
JavaScript syntax:	object.style.verticalAlign="middle"

vertical-The syntax of align usage

The syntax of this attribute is as follows:

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

The following example demonstrates how to use vertical-align attribute.

Example

　　img　{
　　　vertical-align:　middle;
　　}
　　span　{
　　　vertical-align:　super;
　　}

Test to see‹/›

Attribute value

The following table describes the value of this property.

Value	Description
baseline	Align the baseline of the element box with the baseline of the parent box.
sub	Lower the baseline of the box to a position suitable for the subscript of the parent box.
super	Raise the baseline of the box to a position suitable for the superscript of the parent box.
top	Align the top of the element and its descendants with the top of the line box.
text-top	Align the top of the element with the top of the parent element's font.
middle	Align the middle of the element with the parent level's baseline raised by the parentx-heighthalf point alignment.
bottom	Align the bottom of the element and its descendants with the bottom of the line box.
text-bottom	Align the bottom of the element with the bottom of the parent element's font.
length	The unit is px, pt, cm, em, etc. The length value is increased (positive value) or decreased (negative value) to the baseline of its parent element by this distance. A value of 0px is the same as the baseline.
percentage	Raise (positive value) or lower (negative value) the box by this distance (line-heightThe percentage value). A value of 0% is the same as the baseline.
initial	Set this property to its default value.
inherit	If specified, the associated elements will use the vertical of its parent element-The value of align attribute.

Browser compatibility

vertical-Browser compatibility of align attribute, the numbers in the table below represent the minimum version number of browsers that support this attribute; all mainstream browsers support this attribute.

	Firefox 1+ Google Chrome1+ Internet Explorer 4+ Apple Safari 1+ Opera 4+