CHAPTER 12 ■ ALIGNING CONTENTVertical-Aligned Content
Problem You have different sizes of inline elements that you want to align to a common set of
reference points. For example, when you have images and text on the same line, you want
to align the images to the top, middle, baseline, or bottom of text.
Solution You can use vertical-align to align an inline element to one of its parent’s four fontlines:
text-top, middle, baseline, and text-bottom. By default, inline content is aligned to the
baseline.
Fontlines provide four reference points to which you can align inline content. They define
what I call an alignment context. Notice how the star image in the example is aligned to
each of the four fontlines established by its paragraph, and its neighboring text is aligned to
the paragraph’s baseline. This is a key point. The star and text are not aligned to each other.
They are aligned to the fontlines established by their parent, the paragraph.
A terminal block establishes the initial alignment context for its inline children and text. The
font and font-size of a block defines the location of the four font lines. The text-top is
located at the top of characters with accents, like the letter “Á.” The baseline is located at
the bottom of characters that do not have descenders, like the letter “M.” The text-bottom
is located at the bottom of characters that have descenders, like the letter “j.” The middle is
located in the middle of the ex height, which is the middle of the letter “x.”
You can use vertical-align:top or bottom to align an inline element to the top or bottom
of a line. top and bottom are typically the same as text-top and text-bottom—unless the
height of a line is taller than its content. A line can be taller than its content when it contains
images, objects, different font sizes, different vertical alignment, or a larger line-height.
If a parent and child share the same font and font-size, their fontlines are located in the
same vertical positions. Aligning to the same fontlines produces no change in alignment. To
see changes, elements need to have different font sizes, or in the case of images and objects,
their height needs to be larger or smaller than the font-size of the alignment context.
Pattern^
HTML
CSS
TERMINAL_BLOCK_SELECTOR { font-size:+em; }
INLINE_SELECTOR { vertical-align:FONTLINE; }
Example The division in the example defines an alignment context with a font-size of 60 pixels. The
letters “ÁMjx” show the font size rendered at its full height from the accent on top of the “Á”
to the bottom of the “j.” The height of the letter “M” is the em height. The height of the letter
“x” is the ex height. The images and spans inside the division are aligned to each of the
division’s fontlines.
Notice how the closing /> of each element is placed on the next line with no spaces
between it and the following . This prevents the whitespace from collapsing out of
the span into the division. Since the division has a font-size of 60 pixels and the span has a
font-size of 18 pixels, whitespace in the division is much wider than whitespace in the
spans.
Related to Vertical-Offset Content, Subscript and Superscript, Nested Alignment; HTML Whitespace
(Chapter 2); Table, Vertical-Aligned Data (Chapter 15); Layout Links (Chapter 17)