CSS Layout How to - Align vertical image

Question

We would like to know how to align vertical image.

Answer


<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
p.one img {<!--from   w  w  w. ja va2 s  .  c o  m-->
  vertical-align: top;
}

p.two img {
  vertical-align: middle;
}

p.three img {
  vertical-align: baseline;
}
</style>
</head>
<body>
  <p class="one">
    This image <img src="http://placehold.it/2x2" alt="Smiley"> is
    aligned vertically top of the text.
  </p>
  <p class="two">
    This image <img src="http://placehold.it/2x2" alt="Smiley"> is
    aligned vertically center of the text.
  </p>
  <p class="three">
    This image <img src="http://placehold.it/2x2" alt="Smiley"> is
    aligned to the baseline of the text.
  </p>
</body>
</html>

The code above is rendered as follows: