<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" type="text/css" href="3vertical-align.css">
</head>
<body>
<h1>vertical-align Property</h1>
<table>
<tr><td>
<span class="plain">Plain text</span> <span class="baseline">baseline</span><img class="baseline" src="img/block.gif" width="50" height="50" alt="block">
</td></tr>
<tr><td class="none"> </td></tr>
<tr><td>
<span class="plain">Plain text</span> <span class="sub">sub</span><img class="sub" src="img/block.gif" width="50" height="50" alt="block">
</td></tr>
<tr><td class="none"> </td></tr>
<tr><td>
<span class="plain">Plain text</span> <span class="super">super</span><img class="super" src="img/block.gif" width="50" height="50" alt="block">
</td></tr>
<tr><td class="none"> </td></tr>
<tr><td>
<span class="plain">Plain text</span> <span class="top">top</span><img class="top" src="img/block.gif" width="50" height="50" alt="block">
</td></tr>
<tr><td class="none"> </td></tr>
<tr><td>
<span class="plain">Plain text</span> <span class="texttop">texttop</span><img class="texttop" src="img/block.gif" width="50" height="50" alt="block">
</td></tr>
<tr><td class="none"> </td></tr>
<tr><td>
<span class="plain">Plain text</span> <span class="middle">middle</span><img class="middle" src="img/block.gif" width="50" height="50" alt="block">
</td></tr>
<tr><td class="none"> </td></tr>
<tr><td>
<span class="plain">Plain text</span> <span class="bottom">bottom</span><img class="bottom" src="img/block.gif" width="50" height="50" alt="block">
</td></tr>
<tr><td class="none"> </td></tr>
<tr><td>
<span class="plain">Plain text</span> <span class="textbottom">textbottom</span><img class="textbottom" src="img/block.gif" width="50" height="50" alt="block">
</td></tr>
<tr><td class="none"> </td></tr>
<tr><td>
<span class="plain">Plain text</span> <span class="100Percent">100%</span><img class="100percent" src="img/block.gif" width="50" height="50" alt="block">
</td></tr>
<tr><td class="none"> </td></tr>
<tr><td>
<span class="plain">Plain text</span> <span class="50Percent">50%</span><img class="50percent" src="img/block.gif" width="50" height="50" alt="block">
</td></tr>
</table>
</body>
</html>