How do I vertically align text using the vertical-align property?
Author: Deron Eriksson
Description: This CSS tutorial describes the vertical-align property.
Tutorial created using: Windows XP


The vertical-align property can be used to set the vertical alignment for an inline element (such as span). The default value is "baseline", which aligns the baseline of the inline element box with the baseline of the parent box. The possible vertical-align values include the following keywords: baseline, sub, super, top, middle, bottom, text-top, and text-bottom. The sub value represents subscript, while the super value represents superscript. Note that the sub and super vertical-align values refer to the alignment of the text and do not influence the font size of the text. In addition, the vertical-align property can be set to inherit. Additionally, vertical-align can be set to lengths (such as 20px or 2em) and percentages (such as 100% or -50%).

The style-test.html file below gives examples of several vertical-align values, such as baseline, super, sub, percentages, and lengths. The first seven examples are span (inline) boxes within div (block) boxes, while the last example is a span within a span.

style-test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test</title>
<style type="text/css">
div { background-color: aqua; border: 1px solid;}
span.baseline { vertical-align: baseline; }
span.super { vertical-align: super; }
span.sub { vertical-align: sub; }
span.onehundredfiftypercent { vertical-align: 150%; }
span.onehundredpercent { vertical-align: 100%; }
span.oneem { vertical-align: 1em; }
span.minusoneem { vertical-align: -1em; }
</style>
</head>
<body>
<div>
<div>Here is some <span class="baseline">baseline</span> text</div>
<div>Here is some <span class="super">superscript</span> text</div>
<div>Here is some <span class="sub">subscript</span> text</div>
<div>Here is some <span class="onehundredfiftypercent">150%</span> text</div>
<div>Here is some <span class="onehundredpercent">100%</span> text</div>
<div>Here is some <span class="oneem">1em</span> text</div>
<div>Here is some <span class="minusoneem">-1em</span> text</div>
</div>
<span>Here is a <span class="super">super</span> example with spans</span>
</body>
</html>

The display of style-test.html in IE7 is shown below.

vertical-align example