Pro HTML5 and CSS3 Design Patterns

CHAPTER 8 ■ POSITIONING: INDENTED, OFFSET, AND ALIGNED

Aligned Static Inline

Problem You want to align static inline elements horizontally and/or vertically, and you want
to offset them from their alignment.

Solution To horizontally align content to the sides of its terminal block container, you
can use text-align. text-align:left aligns content to the left side. text-
align:right aligns content to the right side. text-align:center centers content.
text-align:justify aligns content to the left and right sides of its container. For
content to be justified, there must be more than one line, because the browser
doesn’t justify the last line.
To align inline content to the vertical center of a line, you can set line-height
to a value larger than the height of the content. This works because a browser
vertically centers the content of each line. This effect doesn’t work when you have
more than one line.
To align inline content vertically, you can use vertical-align:CONSTANT or
vertical-align:±VALUE. The only time you can see the vertical alignment is when
items in the same line have different heights or different vertical alignment. Vertical
alignment doesn’t persist between lines because a browser shrinkwraps and
vertically centers the content of each line. Thus, inline vertical alignment is relative
to the content actually present in a line.

Horizontal Patterns Left-aligned Static Inline Element^

TERMINAL-BLOCK-SELECTOR { position:static; text-align:left; }

Center-aligned Static Inline Element

TERMINAL-BLOCK-SELECTOR { position:static; text-align:center; }

Right-aligned Static Inline Element

TERMINAL-BLOCK-SELECTOR { position:static; text-align:right; }

Justified Static Inline Element

TERMINAL-BLOCK-SELECTOR { position:static; text-align:justify; }

Vertical Patterns Middle-aligned Static Inline Element
SELECTOR { position:static; line-height:+VALUE; }

Relative-aligned Static Inline Element

SELECTOR { position:static; vertical-align:±VALUE; }

Location These patterns work on inline elements.

Related to Aligned and Offset Static Block; Left Aligned, Left Offset, Right Aligned, Right Offset,
Center Aligned, Center Offset (Chapter 9); Invisible Text (Chapter 10); Spacing,
Blocked (Chapter 11); Horizontal-aligned Content (Chapter 12); Table (Chapter 15)