CHAPTER 12 ■ ALIGNING CONTENTVertical-Offset Content
Problem You want to vertically offset two or more inline elements that are on the same line. For
example, you want to vertically position an image in relation to neighboring text, or you
want to position two or more images in relation to each other, or you want to position a
drop cap in relation to the following text, or you want to offset text to create a subscript or
superscript effect.
Solution You can use vertical-align to offset a child inline element from the baseline of its parent.
Positive values raise an element above the baseline, and negative values lower it below the
baseline. A line automatically expands to accommodate the offset element.
You can use ems in vertical-align. One em is equal to the element’s font-size. For
example, 1em raises text above where its top is normally located, and -1em lowers text below
where its bottom is normally located. Ems have the advantage of scaling along with the text.
Thus, if a browser zooms in or out, ems scale proportionally.
You can use pixels in vertical-align. Pixels do not change when a browser zooms in or
out, and the offset does not change. This is usually not desirable when offsetting text, but it
may be exactly what you want when you are offsetting images.
vertical-align:0 is the same as aligning to the baseline.
Pattern^
HTML
CSS
INLINE_SELECTOR { vertical-align:±VALUE; }
Location This pattern works on inline text elements.
Limitations Vertical offsets are for contrasting the position of two or more inline elements that are on
the same line. Since a browser always centers content in a line, if you vertically offset only
one element on a line, you will not see the offset because it is centered away.
Tip I do not recommend using percentages to vertically offset inline elements because the
results are hard to predict. The percentage is a proportion of the element’s line-height.
This would be useful if percentages offset an element from the bottom of a line, but they
offset it from the baseline. Since a browser centers content within a line, the location of the
baseline within a line is not easy to predict.
Example The division in the example defines an alignment context with a font-size of 60 pixels. The
letters “ÁMjx” show the rendered font size. The images and spans inside the division are
offset from the baseline of the division’s alignment context.
Related to Vertical-Aligned Content, Subscript and Superscript, Nested Alignment; Inline Decoration
(Chapter 11); Button (Chapter 17); Aligned Dropcap, First-Letter Dropcap, Padded Dropcap
(Chapter 18)