Go to content Go to navigation Go to search

Vertical Centering in XHTML

What works in HTML may not work in XHTML - simply adding or removing the doctype line may show the effect coming and going.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

1. In FF and IE you must have a rule

body { height: 100% }
2. In FF you must also have a rule on the html element
html { height: 100%; }

So if your styles are

html, body { height: 100%; margin: 0; padding: 0; }
table.popup {  height: 100%; width: 100%; }
table.popup td { vertical-align: middle; text-align: center; }
div.popup { position: relative; margin: 0 auto; font-size: 130%; }

Then the code below will center vertically and horizontally

<body>
<table class="popup">
<tr>
<td><div class="popup">
!CENTERED TEXT HERE! </div></td>
</tr>
</table>
</body>
Previous post:
Playlist generation JSP
Next post:
Mysql user debian-sys-maint