<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
#point{
vertical-align: baseline;
}
#point1{
vertical-align: sub;
}
#point2{
vertical-align: super;
}
#point3{
vertical-align: text-top;
}
#point4{
vertical-align: middle;
}
#point5{
vertical-align: text-bottom;
}
#point6{
vertical-align: -45px;
}
#point7{
vertical-align: -250%;
}
</style>
</head>
<body>
<h1>CSS direction Property</h1>
<h2>vertical-align: baseline; (default value)</h2>
<div><img id="point" src="apple.png">- This is apple.</div>
<h2>vertical-align: sub;</h2>
<div><img id="point1" src="apple.png" width="12" height="12">- This is apple.</div>
<h2>vertical-align: super;</h2>
<div><img id="point2" src="apple.png" width="12" height="12">- This is apple.</div>
<h2>vertical-align: text-top;</h2>
<div><img id="point3" src="apple.png">- This is apple.</div>
<h2>vertical-align: middle;</h2>
<div><img id="point4" src="apple.png">- This is apple.</div>
<h2>vertical-align: text-bottom;</h2>
<div><img id="point5" src="apple.png">- This is apple.</div>
<h2>vertical-align: -45px;</h2>
<div><img id="point6" src="apple.png">- This is apple.</div>
<h2>vertical-align: -250%;</h2>
<div><img id="point7" src="apple.png">- This is apple.</div>
<p><strong>Note</strong>: To see the difference between 'sub' and 'super', the size of the apple is reduced.</p> </body>
</html>