<!DOCTYPE html>
<html>
<body>
<h1>Align image with CSS</h1>
<h2>vertical-align: bottom</h2>
<p>This is some text. <img src="https://horje.com/avatar.png" alt="Smiley face" width="42" height="42" style="vertical-align:bottom"> This is some text. This is some text. This is some text.</p>
<h2>vertical-align: middle</h2>
<p>This is some text. <img src="https://horje.com/avatar.png" alt="Smiley face" width="42" height="42" style="vertical-align:middle"> This is some text. This is some text. This is some text.</p>
<h2>vertical-align: top</h2>
<p>This is some text. <img src="https://horje.com/avatar.png" alt="Smiley face" width="42" height="42" style="vertical-align:top"> This is some text. This is some text. This is some text.</p>
<h2>float: right</h2>
<p>This is some text. <img src="https://horje.com/avatar.png" alt="Smiley face" width="42" height="42" style="float:right">This is some text. This is some text. This is some text.</p>
<h2>float: left</h2>
<p>This is some text. <img src="https://horje.com/avatar.png" alt="Smiley face" width="42" height="42" style="float:left">This is some text. This is some text. This is some text.</p>
</body>
</html>