CHAPTER 12 ■ ALIGNING CONTENTAdvanced Alignment Example
Example I have included this example for fun. It uses advanced alignment techniques and relative
offsets. This is not an actual design pattern. Something this complex is probably better
rendered as an image or as MathML. This is simply an example of how powerful CSS can be.
This example is sizable. You can use the zoom feature in your browser to enlarge or shrink
it. Everything remains aligned properly as it changes size.
This example works the same in all major browsers, which shows how consistently browsers
have implemented alignment contexts.
The example uses font-size to set the size of each alignment context. The two alignment
contexts in the example are defined by the elements assigned to the classes ac1 and ac2. I
assigned a large enough font-size to ac1 to make room for all its vertically aligned
children. The second alignment context is the (n-1)/2 part of the formula. Notice how all
its children are aligned relative to the second alignment context.
I used white-space:nowrap to prevent the example from wrapping to another line. I used
vertical-align to align elements to various parts of the example. I used
position:relative and left to move elements into horizontal position. I used em
measurements for vertical-align and left so they would scale proportionally to the
font-size. This allows them to grow or shrink as the font-size grows and shrinks. You can
assign different font sizes to the paragraph in the example to see this in action.
Features^
HTML
CSS
.CLASS { font-size:±em;
white-space:nowrap;
vertical-align:±em;
position:relative;
left:±em; }
Location These features work only on inline elements.
Related to Vertical-Aligned Content, Vertical-Offset Content, Nested Alignment; Positioned, Relative
(Chapter 7); Offset Relative (Chapter 8); Nowrap (Chapter 11)