CHAPTER 12 ■ ALIGNING CONTENTHorizontal-Aligned Content
Problem You want to left-align, center-align, right-align, or justify the content in a terminal block
element, such as a paragraph. For example, you may want to center-align text in a heading,
right-align a label assigned to a control, or left-align data in one table column and right-
align data in another.
Solution You can use text-align to align the text within its terminal block.
Use text-align:left to align the text to the left of the block.
Use text-align:center to align the text to the center of the block.
Use text-align:right to align the text to the right of the block.
Use text-align:justify to justify the text to both sides of the block. Browsers typically
justify text by increasing space between words to stretch the text to the sides of the block.
Patterns^
HTML
CSS
.align-left { text-align:left; }
.align-center { text-align:center; }
.align-right { text-align:right; }
.align-justify { text-align:justify; }
Location This design pattern works only on terminal block elements containing content. Without
content, there is nothing to align. It does not work on inline elements. It does not work
directly on structural block elements, but you can assign text-align to a structural block
element, and it can be inherited by child elements.
Tips When justifying text, it is important to size the block large enough to prevent a browser from
putting unpleasant amounts of extra whitespace between words. The justification algorithm
is not sophisticated. It only adds space between words. It does not automatically hyphenate
words, and it does not put extra space between letters.
In spite of the name, text-align aligns all types of content including text, images, objects,
controls, and so on.
Related to Aligned Static Inline (Chapter 8); Left Aligned, Left Offset, Right Aligned, Right Offset, Center
Aligned, Center Offset (Chapter 9); Spacing (Chapter 11); Opposing Floats, Tab Menu, Tabs,
Layout Links (Chapter 17); Center Callout (Chapter 19)