CSS Layout How to - Image vertical-align: top








Question

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

Answer


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