Pro HTML5 and CSS3 Design Patterns

CHAPTER 12 ■ ALIGNING CONTENT

Vertical-Aligned Content

HTML

<h1>Vertical-Aligned Content</h1>

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

<img class="text-top" src="bar.gif" alt="bar"

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

<img class="middle" src="bar.gif" alt="bar"

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

<img class="baseline" src="bar.gif" alt="bar"

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

<img class="text-bottom" src="bar.gif" alt="bar"

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

<p class="text">

baseline → <img class="baseline" src="star.gif" alt="star" />

text-top → <img class="text-top" src="star.gif" alt="star" />

middle → <img class="middle" src="star.gif" alt="star" />

text-bottom → <img class="text-bottom" src="star.gif" alt="star" /></p>

CSS

div { font-size:60px; line-height:normal; border:1px solid black; }

.main { background-color:gold; padding:0 10px; }

.text { font-size:18px; }

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

.middle { vertical-align:middle; }

.baseline { vertical-align:baseline; }

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