HTML and CSS Reference
In-Depth Information
This vertical alignment demonstration page can be found in the project files ch09-02, named vertical-align-
property-demo.html
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.
