The vertical-align property (CSS Reference)
Introduction
The vertical-align property can be used to align text
vertically. The following example demonstrates it.
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
img.baseline { vertical-align: baseline; }
img.sub { vertical-align: sub; }
img.super { vertical-align: super; }
img.top { vertical-align: top; }
img.texttop { vertical-align: text-top; }
img.middle { vertical-align: middle; }
img.bottom { vertical-align: bottom; }
img.textbottom { vertical-align: text-bottom; }
</style>
<title>vertical-align Demonstration</title>
</head>
<body>
<h1><p>vertical-align demonstration</p></h1>
<b>vertical-align:baseline</b><img
class="baseline"
src="http://www.topxml.com/images/topxml_site.gif">
<b>vertical-align:sub</b><img
class="sub"
src="http://www.topxml.com/images/topxml_site.gif">
<b>vertical-align:super</b><img
class="super"
src="http://www.topxml.com/images/topxml_site.gif"><hr/>
<b>vertical-align:top</b><img
class="top"
src="http://www.topxml.com/images/topxml_site.gif">
<b>vertical-align:text-top</b><img
class="texttop"
src="http://www.topxml.com/images/topxml_site.gif">
<b>vertical-align:middle</b><img
class="middle"
src="http://www.topxml.com/images/topxml_site.gif"><hr/>
<b>vertical-align:bottom</b><img
class="bottom"
src="http://www.topxml.com/images/topxml_site.gif">
<b>vertical-align:textbottom</b><img
class="textbottom"
src="http://www.topxml.com/images/topxml_site.gif">
</body>
</html>
Output
Values
|
Name:
|
Description:
|
|
baseline
|
This is the default value and aligns the text to the
baseline.
|
|
bottom
|
This value assigns the selected text with the lowest
character on the same line.
|
|
length
|
The length value can be used to raise or lower the
element. You can use one of the following values.
cm (centimeter)
em (ems)
inch (inches)
mm (millimeters)
pc (picas)
px (pixels)
pt (points)
|
|
middle
|
The value is used to assign the text to the middle of the
line.
|
|
sub
|
This value can be used to align the text as a subscript.
|
|
super
|
This value can be used to align the text as a superscript.
|
|
text-top
|
This value can be used to align the text with the tallest
character on the top.
|
|
text-bottom
|
This value can be used to align the text with the tallest
character on the bottom.
|
|
top
|
This value can be used to align the text with the tallest
character on the same line.
|
|
Email TopXML