Baseline
<html>
<head>
<style>
img { vertical-align: baseline;}
</style>
</head>
<body>
<h1>Baseline</h1>
<p>A <img src="learningcode/well_done_faithfull.jpg" width="40" height="40" alt=""/> image is aligned with the baseline of the parent. (default) </p>
</body>
</html>
Results
A 
image is aligned with the baseline of the parent. (default).
Length
<!DOCTYPE html>
<html>
<head>
<style>
img { vertical-align: 85px;}
</style>
</head>
<body>
<h1>Length</h1>
<p>A<img src="well_done_faithfull.jpg" width="40" height="40" alt=""/> image that raises or lower an element by the specified length. Negative values are allowed. </p>
</body>
</html>
Results
A image that raises or lower an element by the specified length. Negative values are allowed.
Percent
<html>
<head>
<style>
img { vertical-align: -80%;}
</style>
</head>
<body>
<h1>Percent</h1>
<p>A<img src="well_done_faithfull.jpg" width="40" height="40" alt=""/> image that raises or lower an element by the specified percent. of the line-height property. Negative values are allowed. </p>
</body>
</html>
Results
A image that raises or lower an element by the specified percent. of the line-height property. Negative values are allowed.
Text-top
<!DOCTYPE html>
<html>
<head>
<style>
img { vertical-align: text-top;}
</style>
</head>
<body>
<h1>text-top</h1>
<p>A<img src="well_done_faithfull.jpg" width="40" height="40" alt=""/> image that is aligned with the top of the parent element's font. </p>
</body>
</html>
Results
A image that is aligned with the top of the parent element's font.
Text-bottom
<!DOCTYPE html>
<html>
<head>
<style>
img { vertical-align: text-bottom;}
</style>
</head>
<body>
<h1>text-bottom</h1>
<p>A<img src="well_done_faithfull.jpg" width="40" height="40" alt=""/> image that is aligned with the bottom of the parent element's font. </p>
</body>
</html>
Results
A image that is aligned with the bottom of the parent element's font.
Sub
<html>
<head>
<style>
img { vertical-align: sub;}
</style>
</head>
<body>
<h1>sub</h1>
<p>A<img src="well_done_faithfull.jpg" width="40" height="40" alt=""/> image that is aligned with the subscript baseline of the parent. </p>
</body>
</html>
Results
A image that is aligned with the subscript baseline of the parent.
Sup
<html>
<head>
<style>
img { vertical-align: sup;}
</style>
</head>
<body>
<h1>Super</h1>
<img src="learningcode/well_done_faithfull.jpg" width="40" height="40" alt=""/> image with a superscript baseline of the parent..
</body>
</html>
Results
A image with a superscript base line of the parent.
Top
<html>
<head>
<style>
img { vertical-align: top;}
</style>
</head>
<body>that
<h1>Top</h1>
<p>A <img src="learningcode/well_done_faithfull.jpg" width="40" height="40" alt=""/> that is aligned with the top of the tallest element on the line.</p>
</body>
</html>
Results
A that is aligned with the top of the tallest element on the line.
Middle
<html> <head>
<style>
img { vertical-align: middle;}
</style>
</head>
<body>
<h1>Middle</h1>
<p>A <img src="learningcode/well_done_faithfull.jpg" width="40" height="40" alt=""/> image is placed in the middle of the parent element. </p>
</body>
</html>
Results
A image is image is placed in the middle of the parent element
Bottom
<html> <head>
<style>
img { vertical-align: bottom;}
</style>
</head>
<body>
<h1>Bottom</h1>
<p>A <img src="learningcode/well_done_faithfull.jpg" width="40" height="40" alt=""/> image is aligned with the lowest element on the line. </p>
</body>
</html>
Results
A image is aligned with the lowest element on the line.