c o m p m i s c e l l a n e a . c o m

HTML centering

Windows : Internet Explorer 3.0+, Firefox 1.0+, Google Chrome, Opera 3.51 - 6.xx и 9.0+, Safari 3.1+, SeaMonkey 1.0+ [ 1 ].

Linux : Firefox 1.0+, Chromium, Opera 5.0 - 6.xx и 9.0+, SeaMonkey 1.0+ [ 2 ].

Centering content of a web page by means of HTML. A block containing the content of a page is HTML centered horizontally and vertically - [ Open demo page ]

HTML horizontal and vertical centering, step by step.

1. A web page, the part of which is going to be the element the HTML horizontal and vertical centering is to be applied to:

HTML / XHTML. Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>HTML centering. Step 1</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252">

</head>

<body bgcolor="#ffffff">

</body>

</html>

2. A framework by means of table of width equal to 100%, height equal to 100%, with align="center" attribute, with one row, with one cell with align="center" attribute is created in the document's body (green color). In order to have the code working in Internet Explorer 3.0, the whole framework is put into <center></center> tag. Surely it is not necessary for new web browsers. [ Open demo page ]

HTML / XHTML. Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>HTML centering. Step 2</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252">

</head>

<body bgcolor="#ffffff">

<!-- For Internet Explorer 3 --><center><!-- For Internet Explorer 3 -->

<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#a3ddc4">

<tr>

<td align="center"></td>

</tr>

</table>

<!-- For Internet Explorer 3 --></center><!-- For Internet Explorer 3 -->

</body>

</html>

3. Another table of, for example, 800px width and 500px height is placed in the table cell, inside the framework. (Grey color). In principle, the table cell content does not necessarily have to be a table or have the properties assigned by means of HTML. [ Open demo page ]

HTML / XHTML. Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>HTML centering. Step 3</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252">

</head>

<body bgcolor="#ffffff">

<!-- For Internet Explorer 3 --><center><!-- For Internet Explorer 3 -->

<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#a3ddc4">

<tr>

<td align="center">

<table cellspacing="0" cellpadding="0" border="0" width="800" height="500" align="center" bgcolor="#999999">

<tr>

<td>&nbsp;</td>

</tr>

</table>

</td>

</tr>

</table>

<!-- For Internet Explorer 3 --></center><!-- For Internet Explorer 3 -->

</body>

</html>

As a result of these three steps the framework table cell content will be centered horizontally and vertically at any screen resolution and at any web browser viewable area size. If the cell content is larger than the web browser viewable area size in width or in length, and then centering, horizontal or vertical respectively, will remain there.

The HTML horizontal and vertical centering, sample page, aggregate result [ Open demo page ] [ Download archive file ].

HTML / XHTML. Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>HTML centering. Aggregate result</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252">

</head>

<body bgcolor="#ffffff">

<!-- For Internet Explorer 3 --><center><!-- For Internet Explorer 3 -->

<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff">

<tr>

<td align="center">

<table cellspacing="0" cellpadding="0" border="0" width="800" height="500" align="center" bgcolor="#999999">

<tr>

<td align="center">

<table cellspacing="0" cellpadding="0" border="0" width="710" height="410" align="center" bgcolor="#ffffff">

<tr>

<td align="center">

<table cellspacing="0" cellpadding="0" border="0" width="708" height="408" align="center" bgcolor="#999999">

<tr>

<td>

<table cellspacing="0" cellpadding="0" border="0" width="708" height="110" align="center" bgcolor="#999999">

<tr>

<td align="center" valign="top"><a href="http://www.compmiscellanea.com/"><font face="Georgia,serif" color="#000000" size="6">COMPMISCELLANEA.COM</font></a></td>

</tr>

<tr>

<td align="center"><a href="http://www.compmiscellanea.com/en/html-centering.htm"><font face="Georgia,serif" color="#ffffff" size="4">HTML centering</font></a></td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

<!-- For Internet Explorer 3 --></center><!-- For Internet Explorer 3 -->

</body>

</html>

HTML horizontal and vertical centering

The oldest of horizontal and vertical centering methods in use. Now it is used less and less as a result of semantic markup spread. However, having become obsolescent, the method is still working - and not only in the major and modern web browsers, but in many alternative and old ones as well. Therefore, if there is any need or desire due to some circumstances coming up, horizontal and vertical centering by means of HTML, <table><table/> tag may be well employed.

One of the flaws of the HTML, <table><table/> tag horizontal and vertical centering is that the code results to be invalid, as the "height" attribute of the <table><table/> tag is used, which, even if supported for years by the majority of web browsers, is incompatible with the standards promoted by World Wide Web Consortium (W3C). The complexity or impossibility to succeed in making both valid and working in the majority of web browsers code was sad reality in 1990s - early 2000s. Now it is a little different - and from this point of view, too - CSS centering method is preferable.

The example presented in the post is based solely on HTML for the sake of purity of the experiment. But in practice, for instance coding for the major web browsers, a combination of HTML and CSS is possible, where <table><table/> tag is employed only for the horizontal and vertical centering of the page content. And the page content is handled the way it is more convenient: by some intermixture of HTML and CSS; maybe by means of some other technologies.

General idea

A table of width equal to 100% and height equal to 100% with align="center" attribute, with one row, with one cell with align="center" attribute is created. This creates a framework, which takes up all the web browser viewable area in width and length at any screen resolution (except the space occupied by margins). Unless the content of the framework is not larger than the web browser viewable area - the framework will then enlarge, scrollbars will appear. But this case is beyond the subject discussed - when the <table><table/> tag is employed to center objects horizontally and vertically it is quite possible to have control over the measurements of the page content. In the end the content of the table cell will be centered at any screen resolution and at any web browser viewable area size.

You may also be interested in:

CSS centering

JavaScript + CSS centering

CSS vertical alignment

[ 1 ]

As well as Netscape 2.02 – 4.80 and Offbyone. There is some shift of page content to the top left corner of the web browser viewable area in Netscape 2.02 – 4.80, since these web browsers reserve the place for scrollbars.

[ 2 ]

As well as Netscape 2.02 – 4.80. There is some shift of page content to the top left corner of the web browser viewable area in Netscape 2.02 – 4.80, since these web browsers reserve the place for scrollbars.

Navigate

Up | Main page