Pro HTML5 and CSS3 Design Patterns

CHAPTER 12 ■ ALIGNING CONTENT

Vertical-Offset Content

HTML

<h1>Vertical-Offset Content</h1>

<div>

_baseline__

<span class="raised">raised 1em </span>

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

__baseline__

<span class="lowered">lowered 1em </span>

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

__baseline_

</div>

CSS

div { border:1px solid black; }

.baseline { vertical-align:baseline; }

.raised { vertical-align:1em; }

.lowered { vertical-align:-1em; }