HTML and CSS Reference
This vertical alignment demonstration page can be found in the project files ch09-02, named vertical-align-
You can give two other values to vertical-align : top and bottom . Where text-top and text-bottom
align an inline-level element relative to text, top and bottom align an inline-level element with the top or bottom
of the parent's content area.
In Figure 9-20, I demonstrated this technique by adding an inline image of those awesome horse socks with a
vertical-alignment of text-bottom (aligning its bottom with the bottom of the text). In the first example,
I gave the speech bubble image a vertical align of text-top , which aligns its top with the top of the text. However,
because the image of the socks is much taller than the rest of the contents, the parent's content area is bigger too. If
you want to position the speech bubble relative to the top of the content area instead of the text, you can specify a
vertical alignment of top .
If none of those values take your fancy and you want a little more control, you can also specify a unit of length or a
percentage where 0 represents the same as baseline . A positive number raises the inline-level or table-cell ele-
ment above the baseline, and a negative number lowers it.