Centering an Image on a Page

Centering Content on a Page:

(beginner)

(intermediate)

Centering page content (so that it always floats in the middle of a page regardless of monitor size or resolution) works very similarly to centering an image on a page (see tutorial) - except that instead of centering an image object we now nest a table inside the container cell.

Example and code:

<HTML>
<HEAD>
<TITLE>Centered Content</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0" HEIGHT="100%">
<TR>
<TD ALIGN="CENTER" VALIGN="MIDDLE" BGCOLOR="#FFCC00">
<TABLE WIDTH="210" BORDER="1" CELLSPACING="0" CELLPADDING="0" HEIGHT="210" BGCOLOR="#FF6633" CLASS="header2">
<TR ALIGN="CENTER" VALIGN="MIDDLE">
<TD BGCOLOR="#CC3300" WIDTH="70">your</TD>
<TD WIDTH="70" HEIGHT="70">stuff </TD>
<TD BGCOLOR="#FF6666" WIDTH="70" HEIGHT="70">here</TD>
</TR>
<TR ALIGN="CENTER" VALIGN="MIDDLE">
<TD WIDTH="70" HEIGHT="70">right</TD>
<TD BGCOLOR="#99CC66" WIDTH="70" HEIGHT="70">in the</TD>
<TD WIDTH="70" HEIGHT="70">middle</TD>
</TR>
<TR ALIGN="CENTER" VALIGN="MIDDLE">
<TD BGCOLOR="#CC6666" WIDTH="70" HEIGHT="70">all</TD>
<TD WIDTH="70" HEIGHT="70">the </TD>
<TD BGCOLOR="#FF3333" WIDTH="70" HEIGHT="70">time</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>