faqts : Computers : Programming : Languages : JavaScript : Frames

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

108 of 125 people (86%) answered Yes
Recently 6 of 10 people (60%) answered Yes

Entry

How can I center my page content horizontally and vertically?
How can I center my page vertically and horizontally?

Feb 12th, 2000 16:34
Martin Honnen,


Put your content in a HTML TABLE with WIDTH/HEIGHT="100%" and one cell 
in one row where the cell has ALIGN="center" VALIGN="middle" set:

<HTML>
<HEAD>
<BODY>
<TABLE WIDTH="100%" HEIGHT="100%">
<TR>
<TD ALIGN="center" VALIGN="middle">
Kibology
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Another solution using JavaScript writes a FRAMESET with the content 
FRAME centered (this works with NN4+ and IE4+):

<HTML>
<HEAD>
<STYLE>
</STYLE>
<SCRIPT>
var url = 'yourPageToCenterHere.html';
function centerFrame (url, width, height) {
if (top == window) {
  var w = window.innerWidth ? window.innerWidth : 
document.body.clientWidth;
  var h = window.innerHeight ? window.innerHeight : 
document.body.clientHeight;
  var w0 = Math.floor((w - width) / 2);
  var h0 = Math.floor((h - height) / 2);
  var html = '';
  html += '<FRAMESET ROWS="' + h0 + ', ' + height + ', ' + h0 + '">';
  html += '<FRAME SRC="about:blank">';
  html += '<FRAMESET COLS="' + w0 + ', ' + width + ', ' + w0 + '">';
  html += '<FRAME SRC="about:blank">';
  html += '<FRAME NAME="main" SRC="' + url + '" SCROLLING="auto">';
  html += '<FRAME SRC="about:blank">';
  html += '<\/FRAMESET>';
  html += '<FRAME SRC="about:blank">';
  html += '<\/FRAMESET>';
  document.open();
  document.write(html);
  document.close();
}
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="centerFrame(url, 200, 200);">
Kibology for all.
</BODY>
</HTML>