Centering Content

**hoyaabanks** · 02-02-2005 05:27 PM

I am trying to center a table in the browser window so that it is in the middle of the screen. Why doesn't this work??

<Table width="100%" height="100%">
<tr><td align="center" valign="middle">
<Table><tr><td><img src="..." ... /></td></tr></Table>
</tr></td>
</Table>

I also bagged the table idea and stuck my content inside a div. I tried to reset the position of the layer with the following javascript:

<Script>
var tp, lf;
tp = ((screen.availHeight - 420)/2) + "px";
lf = ((screen.availWidth - 760)/2) + "px";

MainContent.style.top = tp;
MainContent.style.left = lf;
</Script>

<div id="MainContent"><img src="..." .../></div>

That didn't work either. I got the values for tp and lf to show using an alert and they worked. The alert would not show me a value for MainContent.style.top.

WHAT IS THE BEST WAY TO CENTER CONTENT IN ANY SCREEN SIZE???? What is going wrong with these solutions. I beleive I got the table height="100%" to work for me before, but it won't now.

Thanks,

Alex

**Sync** · 02-04-2005 04:25 AM

It's correct.

Code:

<Table width="100%" height="100%">
<tr><td align="center" valign="middle">
<Table><tr><td><img src="..." ... /></td></tr></Table>
</tr></td>
</Table>

You can write like that
[ divHeight and divWidth ] These 2 variable are the height and width of your DIV.
I think you can adjust the position.

Code:

<div id="MainContent" style="POSITION: absolute;">
  <img src="_40094290_nin_dsopen203b.jpg" width="203" height="152"></div>
  <Script language="javaScript">
	var tp, lf;
	//tp = ((screen.availHeight )/2) + "px";
	//lf = ((screen.availWidth)/2) + "px";

	var mc=document.getElementById('MainContent');
	
	var divHeight=152;
	var divWidth=203;
	
    tp = (screen.height/2) - divHeight;
	lf = (screen.width/2)- divWidth;

	mc.style.top = tp;
	mc.style.left = lf;
</Script>

**ferki** · 02-17-2005 01:06 PM

100% heght on table don't work on many browsers. But if you are using IE then solution can be correctly defined doc type in the first line of your page. It is IE's strange behavior. Try put this there if you are using DHTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

**hoyaabanks** · 02-17-2005 02:08 PM

I have that line of code in my document and I am using IE 6. Still doesn't work.

**kashif_82** · 02-19-2005 08:15 PM

This should work:
<Table width="100%" height="100%">
<tr>
<td align="center" valign="middle" width="100%">
<img src="..." ... />
</td>
</tr>
</table>

Note the width=100% in the TD as well.. Also your TR was closed before your TD.

Thread: Centering Content

Thread Tools

Display

Centering Content

Bookmarks

Bookmarks

Posting Permissions