CSS Layout How to - Image vertical-align: middle

Question

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

Answer


<!DOCTYPE html>
<html lang="en">
<head>
</head><!-- ww  w  .j  a  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: