Pro HTML5 and CSS3 Design Patterns

CHAPTER 12 ■ ALIGNING CONTENT

Nested Alignment

HTML

<h1>Nested Alignment</h1>

<div class="ac1">

<span class="main">ÁMjx</span><span class="ruler"> </span>

<span class="ac2 lower20px main ruler" >    -20px

<span class="ac3 raise35px">+35px</span>

<span class="ac3 text-top">text-top</span>

<span class="ac3 middle">middle</span>

<span class="ac3 baseline">baseline</span>

<span class="ac3 text-bottom">text-bottom</span>

<span class="ac3 lower20px">-20px</span>

</span>

</div>

CSS

.ac1 { font-size:50px; }

.ac2 { font-size:30px; }

.ac3 { font-size:12px; }

.raise35px { vertical-align:35px; }

.lower20px { vertical-align:-20px; }

.text-top { vertical-align:text-top; }

.middle { vertical-align:middle; }

.baseline { vertical-align:baseline; }

.text-bottom { vertical-align:text-bottom; }

/* Nonessential rules are not shown. */