align top middle bottom
The following images are aligned top, middle, and bottom.
top aligns the top of the image with the top of the line.
The top of the line is a little higher than the tallest letter, because there is a little padding.
middle aligns the middle of the image with the middle of the letters.
bottom aligns the bottom of the image with the base line of the letters.
The descenders go below the base line in letters such as g j p q.
The example includes the characters |_ _| to better show the maximum size and baseline of the letters.
This image |_
_| is aligned top.
This image |_
_| is also aligned top.
This image |__| is aligned middle.
This image |__| is also aligned middle.
This image |__| is aligned bottom.
This image |__| is also aligned bottom.
The img tags used in the above examples are:
<img src="images/dot.gif" alt="dot" height="31" width="31" style="vertical-align:text-top;" />
<img src="images/box.gif" alt="box" height="15" width="17" style="vertical-align:text-top;" />
<img src="images/dot.gif" alt="dot" height="31" width="31" style="vertical-align:middle;" />
<img src="images/box.gif" alt="box" height="15" width="17" style="vertical-align:middle;" />
<img src="images/dot.gif" alt="dot" height="31" width="31" style="vertical-align:text-bottom;" />
<img src="images/box.gif" alt="box" height="15" width="17" style="vertical-align:text-bottom;" />