[Home]Centered on the page

HomePage | RecentChanges | Preferences | Newbie Help

Category HTML FAQ

Put it in a table --

    <body>
        <table cellspacing="0" cellpadding="0" align="center" border="0" height="100%">
        <tr>
        <td height="100%" valign="middle" align="center">
            <img src="mypic.gif" height="120" width="240">
        </td></tr></table>
     </body>

In which browsers does this non-standard HTML work/not work? (Whichever list is shorter.)

Works in MSIE5.5, NS4.7, browser view of HomeSite4.5 -- that's all I've got here. That would seem to cover about 80% of the surfers out there. Do you have one (or more) browsers that it doesn't work in? We could put that info in a Caveat to the FAQ. -- Jerry Muelver

From a posting by Etan Wexler in ciwas On Thu, 08 Mar 2001 16:02:37 -0500, a CSS solution--

div#content {
    margin-top: 10%;
    margin-bottom: 10%;
    border-top: 0;
    border-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    height: 80%;
    }


Brucie says:
<html>
<head>
</head>
<body>
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>
    <td align="center" valign="middle" bgcolor="#00cccc">

stick your site in here

    </td>
</tr>
</table>
</body>
</html>

the above will center your site (depending on how you've designed your site)horizontally and vertically in the browser window regardless of screen resolution.

for example: if you put a 100x100 pixel table in where it says "stick your site in here" the table will always be centered hoz and vert regardless of the browser window size/screen resolution (unless its smaller than 100px). Note that height is not a valid attribute on <table>s.

another example using CSS:

<html>
<head>
<style type="text/css">
<!--
TABLE.align{
  color : black;
  background-color : #00cccc;
  width : 100%;
  height : 100%;
  text-align : center;
}
-->
</style>
</head>
<body>
<table class="align">
    <tr>
	<td>

	stick your site in here

	</td>
    </tr>
</table>
</body>
</html>

Another example, with centered text -- http://www.users.bigpond.net.au/rf/tricks/centered_content.htm

Eric Bednarz says: The easiest and most reliable way is Brucie's suggestion to use the unspecified height attribute (and to remove the doctype declaration for UAs which suffer from DocHype-switch).

The CSS examples don't work or shouldn't work as is. In CSS, 100% height means 100% of the containing block; the initial containing block that hosts the root element is generated by the document root (not to be confused with the root element) and either grows with the height of the content or has the height which is specified for the root element (in a sensible world that would be a length).

On the practical side

html,body
  {
  height: 100%;
  margin: 0;
  border: none;
  padding: 0;
  }
works in Opera 6, Internet Exploiter 6 and Mozilla 1 (all windows) as people might expect, that is claiming the full height of the viewport; so this should be included when using a CSS approach.

IMNSHO this can be considered a bug; 100% of what? Most people try to pull the emergency break whenever this discussion comes up and refer to section 10.1.1 of the CSS2 specs which holds the rather vague statement that the the ICB is chosen by the user agent. But that doesn't justify making the viewport the ICB. Is the document root outside of the viewport then? Where? On my desktop? The viewport is just a GUI environment to consult a document through, it's not a property of the document, it's a property of the user agent. The initial containing block cannot be bigger or smaller than the document itself.

The only CSS2 scheme that explicitly refers to the viewport is position:fixed (note that a fixed element would thus scroll if the initial containing block was equivalent to the viewport :-); a sensible approach to cover the whole viewport could be

body
  {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  }
Support is very poor of course. This was the short version (which was overdue, sorry for that) :->
HomePage | RecentChanges | Preferences | Newbie Help
This page is read-only | View other revisions
Last edited June 28, 2002 8:01 pm (diff)
Search:

This FAQ is happily hosted by Betadome Digital Media