CSS Layout How to - Image vertical-align: baseline

Question

We would like to know how to image vertical-align: baseline.

Answer


<!DOCTYPE html>
<html lang="en">
<head>
</head><!--  w w w . ja v a  2 s  .c  o m-->
<body>
  <p>
    This image <img src="http://placehold.it/5x5" alt="Smiley"
      style="vertical-align: top;"> is aligned vertically top of the
    text.
  </p>
  <p>
    This image <img src="http://placehold.it/5x5" alt="Smiley"
      style="vertical-align: middle;"> is aligned vertically center
    of the text.
  </p>
  <p>
    This image <img src="http://placehold.it/5x5" alt="Smiley"
      style="vertical-align: baseline;"> is aligned to the baseline
    of the text.
  </p>
</body>
</html>

The code above is rendered as follows: