Pro HTML5 and CSS3 Design Patterns

CHAPTER 15 ■ TABLES

Vertical-Aligned Data

HTML

<h1>Vertical-Aligned Data</h1>

<table>

<tr>

<td class="align-top" >These lines of text are vertically aligned

to the top of the cell.</td>

<td class="align-middle">These lines of text are vertically aligned

to the middle of the cell.</td>

<td class="align-bottom">These lines of text are vertically aligned

to the bottom of the cell.</td></tr></table>

CSS

.align-top { height:200px; vertical-align:top; }

.align-middle { height:200px; vertical-align:middle; }

.align-bottom { height:200px; vertical-align:bottom; }

/* Nonessential styles are not shown */