<![CDATA[<!DOCTYPE html>
<html>
<head>
<style>
img.a {
vertical-align: baseline;
}
img.b {
vertical-align: text-top;
}
img.c {
vertical-align: text-bottom;
}
img.d {
vertical-align: sub;
}
img.e {
vertical-align: super;
}
</style>
</head>
<body>
<h1>The vertical-align Property</h1>
<h2>vertical-align: baseline (default):</h2>
<p>Align the orange square to baseline: <img class="a" src="JoshBlock.png" width="9" height="9"></p>
<h2>vertical-align: text-top:</h2>
<p>Align the orange square to text-top: <img class="b" src="JoshBlock.png" width="9" height="9"></p>
<h2>vertical-align: text-bottom:</h2>
<p>Align the orange square to text-bottom: <img class="c" src="JoshBlock.png" width="9" height="9"></p>
<h2>vertical-align: sub:</h2>
<p>Align the orange square to sub: <img class="d" src="JoshBlock.png" width="9" height="9"></p>
<h2>vertical-align: sup:</h2>
<p>Align the orange square to super: <img class="e" src="JoshBlock.png" width="9" height="9"></p>
</body>
</html>
]]>