How do you always centre a page?

[meeble]

Hello,

How do you do it so that your HTML page is always centred in the middle of the screen no matter what the resolution or browser.

Many thanks

 

[cian]

Hi,

If it's a table layout simply add align="center" to the outer table. If that table is width 100% you would need to add align="center" to the table cell to center it's contents.

You can also use CSS

body { text-align : center; }
and then in your tables or divs you would need to counter that but using text-align:left;

Hope that makes sense.


::

http://www.endamcg.com

 

[meeble]

Hello,

Do you mean...?

<table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;>
<tr>
<td align=&quot;center&quot;>

<table width=&quot;760&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; align=&quot;left&quot;>
<tr>
<td>
test
</td>
</tr>
</table>

</td>
</tr>
</table>

This doesn't work.

Cheers

James

 

[cian]

Hi, almost!

Your outer table takes up the full screen width so you want to center the content within that. Therefore you should use <td align=&quot;center&quot;> on the outer table or else <table align=&quot;center&quot;> on the inner table.

So either:

<table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;>
<tr>
<td align=&quot;center&quot;>

<table width=&quot;760&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;>
<tr>
<td>
test
</td>
</tr>
</table>

</td>
</tr>
</table>

OR ELSE:

<table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;>
<tr>
<td>

<table width=&quot;760&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; align=&quot;center&quot;>
<tr>
<td>
test
</td>
</tr>
</table>

</td>
</tr>
</table>


My point about the CSS way was simple to align the content withing that tabels, not the tables itself.



::

http://www.endamcg.com

 

[petey]

CSS margin:auto; is the standard way to do it.

<div style=&quot;width:500px;margin:auto;border:1px solid black;&quot;>stuff here</div>

IE 5 incorrectly ignores margin:auto;, but also incorrectly centers the element if the parent element has text-align:center; so there's a workaround.

Cheers,
petey

http://www.drpeterjones.com/