Pro HTML5 and CSS3 Design Patterns

CHAPTER 8 ■ POSITIONING: INDENTED, OFFSET, AND ALIGNED

Aligned Static Inline

HTML

<h1>Aligned Static Inline</h1>

<div>

<p id="l">Left-aligned content</p>

<p id="c">Horizontally and Vertically Center-aligned Content</p>

<p id="r">Right-aligned content</p>

<p id="j">Justify-aligned works on all but the last line. This line is

justified but the last line is not.</p>

<p><span class="baseline">Aligned to baseline.</span>

<span class="lowered">Lowered relative to the baseline.</span>

<span class="raised">Raised relative to... </span></p></div>

CSS

.baseline { vertical-align:baseline; } .raised { vertical-align:10px; } .lowered { vertical-

align:-10px; }

#l { position:static; text-align:left; } #c { position:static; text-align:center; line-

height:48px; } #r { position:static; text-align:right; } #j { position:static; text-

align:justify; }

/* Nonessential rules are not shown. */