<!DOCTYPE html>
<html>
<head>
<title>CSS vertical-align property</title>
<style>
p {
font-family: sans-serif;
font-size: 18px;
padding: 10px;
/*text-decoration: underline overline;*/
}
img.one {
vertical-align: baseline;
}
img.two {
vertical-align: top;
}
img.three {
vertical-align: text-top;
}
img.four {
vertical-align: middle;
}
img.five {
vertical-align: bottom;
}
img.six {
vertical-align: text-bottom;
}
span.seven {
vertical-align: sub;
}
span.eight {
vertical-align: super;
}
</style>
</head>
<body>
<p>This is <img class="one" src="../../images/vertical.png" alt="Smiley"> symbol with baseline</p>
<p>This is <img class="two" src="../../images/vertical.png" alt="Smiley"> symbol with top</p>
<p>This is <img class="three" src="../../images/vertical.png" alt="Smiley"> symbol with text-top</p>
<p>This is <img class="four" src="../../images/vertical.png" alt="Smiley"> symbol with middle</p>
<p>This is <img class="five" src="../../images/vertical.png" alt="Smiley"> symbol with bottom</p>
<p>This is <img class="six" src="../../images/vertical.png" alt="Smiley"> symbol with text-bottom</p>
<p>The molecular formula for water is: H<span class="seven">2</span>O</p>
<p>Circle area formula is: Area = π × r<span class="eight">2</span></p>
</body>
</html>
