html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Reference

CSS vertical-align property

Definition

The CSS vertical-align property allows us to specify the vertical alignment of an element.

Applies To

All inline-level and table-cell elements.

Property Values

negative values are acceptable when using the CSS vertical-align property..

baseline - Align the baseline of the current elements box with the baseline of its parent element box.

bottom - Align the bottom of the element with the lowest element on the line.

inherit - The element will inherit the vertical-align property of its parent element.

length - Defines a length value in a unit measurement such as em or pixel, for raising or lowering the current elements baseline. A value of 0 equates to using the baseline keyword.

middle - Align the vertical midpoint of the current element, half way up from the baseline of the parent element.

sub - Lowers the baseline of the current elements box to the position of subscripts relative to the parent element.

super - Raises the baseline of the current elements box to the position of superscripts relative to the parent element.

text-bottom - Align the bottom of the element with the bottom of the parent element font.

text-top - Align the top of the element with the top of the parent element font.

top - Align the top of the element with the highest element on the line.

n% - Raise or lower the baseline of the box by a percentage value where n is a number. A value of 0% is equates to using the baseline keyword.

Default Value

Default value is set to baseline which aligns the baseline of the current elements box with the baseline of its parent element box.

Inheritance

The vertical-align property is NOT inherited from the parent element unless specified using the inherit property value.

Browser Anomalies

IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.

When the box contains more than one font size, user agents may determine the normal line-height by using the largest font-size used.

Example



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for the CSS vertical-align property follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS 1/2 Reference - CSS vertical-align Property</title>

<!-- Valid values for CSS vertical-align Property are:
	
	baseline, bottom. inherit, middle, sub, super, text-bottom, 
	text-top, top, length and percentage value.
	
--> 

<style type="text/css">

#img1 {
  vertical-align: text-top;
}

#img2 {
  vertical-align: text-bottom;
}

</style>

</head>
<body>
<h1>CSS vertical-align Property</h1>
<h2>Image with vertical-align of text-top</h2>
<p>
<img id="img1" src="http://htmldoctor.info/images/fishpiesmall.jpg"
    alt="Fish Pie" />Look at the vertical alignment of the text.</p>
<h2>Image with vertical-align of text-bottom</h2>
<p>
<img id="img2" src="http://htmldoctor.info/images/fishpiesmall.jpg"
    alt="Fish Pie" />Look at the vertical alignment of the text.</p>
</body>
</html>

How It Looks

The results of using the vertical-align property with the values above will look something like the following:

notepad
CSS unicode-bidi    << Prev          Next >>   CSS visibility

go to home page Homepage go to top of page Top

CSS properties

The complete set of visual CSS properties from the latest 2.1 Specification.

Click the links for more information on individual properties and their values.