CSS Text

<img style="vertical-align:top;" />

<img style="vertical-align:text-top;" />

<img style="vertical-align:middle;" />

<img style="vertical-align:bottom;" />

<img style="vertical-align:text-bottom;" />

<img style="vertical-align:baseline;" />

In the examples above, the code in the text is applied to the tiny image on the left. This image is deliberately small to better show the effect. The image on the right of the text is there, like the text, to show how the code applied to the small image relates to it. The src="" is left out to save space and redundancy.

In the top example you'll note that the left image aligns itself with the top of the right image and not the text. This is because the "top" value aligns what it's applied to, to the tallest element on the line.

The next example, "text-top", does just what it says, aligns the element it's applied to, to the top of the font.

The third example, "middle", aligns the element containing this code with the middle of the font and not the tallest element on the line. In the next three examples the larger image on the right also has this code applied to it. I needed to do this since the default alignment of the image was with the bottom of the text. This would not have demonstrated the examples well.

In the next two examples the code does just the opposite of their "top" counterparts. That is to align the applied element with the lowest point on the line and the bottom of the text respectively.

In the last example you'll notice that the small image is just a little higher than the one with the "text-bottom" applied. This is because the "baseline" of a font is the bottom edge common to the characters of the font excluding the little serif decorations and other things that hang below the baseline such as the tails on the y and g.

There's something important to mention here. Since the "vertical-align" property is normally applied to a single element, it is not inherited by the other elements and therefore is not an inherited property.

As you've seen here, this property doesn't apply to just text. It is however the most relevant category for it. That's why I've included it here. Feel free to apply it as you wish, no telling what it may work for. Just try the page in several popular browser and make sure they all support it the same.