Forum Moderators: open

Message Too Old, No Replies

Center

centering vertically and horizontally

         

fashezee

1:19 pm on Jul 11, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



What is the best way to have a table centered vertically and horizontally; with regards to the entire page?

pageoneresults

3:03 pm on Jul 11, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Maybe something like this...

<table border="0" cellspacing="0" width="100%" height="100%">
<tr>
<td width="100%">
<div align="center">
<table border="0" cellspacing="0">
<tr>
<td width="100%">&nbsp;</td>
</tr>
</table>
</div>
</td>
</tr>
</table>

P.S. I've almost forgotten how to use tables! ;)

Nick_W

3:18 pm on Jul 11, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The centering horizontally should be easy providing your tables width is specified in you css:

#tablecenter {
width: 400px;
margin-right: auto;
margin-left: auto;
}

The vertical centering is a little tricky and I've not done it before so I'll leave that to someone else...
...

Nick

BlobFisk

4:44 pm on Jul 11, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member




<div align="center">

Has the align= not been deprecated? Or is it still ok within an div tag?

The CSS attribute for vertical alignment is:

[blue]
vertical-align: [baseline ¦ sub ¦ super ¦ top ¦ text-top ¦ middle ¦ bottom ¦ text-bottom ¦ <percentage> ¦ <length> ¦ inherit]
[/blue]

And for horizontal aligment you can use either

[blue]text-align: [left ¦ center ¦ right ¦ justify ¦ <string> ¦ inherit][/blue]
or
[blue]float: [left ¦ right ¦ none ¦ inherit][/blue]
.

In this case vertical-align: middle; text-align: center should do the trick...

[edited by: BlobFisk at 4:49 pm (utc) on July 11, 2002]

Nick_W

4:48 pm on Jul 11, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Nope, doesn't do it.

Nick

pageoneresults

4:49 pm on Jul 11, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I'm not so sure that fashezee is using CSS. If not, I provided the tried and true basic table layout that addresses the vertical center issue.

If fashezee is using CSS, then there are other methods as stated in this thread. I'm sure tedster or papabaer will be along to confirm.

fashezee

5:37 pm on Jul 11, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



pageoneresults ...Thanks...I'm using IE 5.0 and the code you posted works fine.

Nick_W

5:53 pm on Jul 11, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Just curious as to how you might tackle it with css....

Nick

fashezee

8:40 pm on Jul 11, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Nick - I believe papabaer posted the method via CSS