Vertically Center a Table 1

[sparklemuffin]

How can I vertically center a table in html so that no matter what size screen resolution, it is always vertically centered?

thanks Much!!

 

[onpnt]

<table align=&quot;center&quot; valign=&quot;middle&quot;>

is that all you need?

valign is vertical alignment and center alignment
so a table with valign middle will produce
_______________________


text here


_______________________ ---------------------------------------
{ str = &quot;sleep is good for you. sleep gives you the energy you need to function&quot;;
ptr = /sleep/gi;Nstr = str.replace(ptr,&quot;coffee&quot;alert(Nstr); }

http://www.onpntwebdesigns.com

 

[sparklemuffin]

Yes I tried that and it's not working in IE 5. I have tried:

TABLE TD {
vertical-align: middle;
}

and also nesting a table inside a table. Nothing seems to be workig.

Becca

 

[onpnt]

So that's what you're doing
well you can't do that. at least like that
first you can only set styles for one element like this
TABLE {
vertical-align: middle;
}


although I would not sugget doing this due it it doing this effect to every table in the page. so do something as this
TABLE.main {
vertical-align: middle;
}

then in the table that is the main table set the class to call upon the style
<table class=&quot;main&quot;>

although this is really redundent and I would simply align the table in the table tag as
<table align=&quot;center&quot; valign=&quot;middle&quot;>
then set other styles to it

Then is you want to format the cells <TD> do that seperately
TD {
vertical-align: middle;
}
etc...

aligning tables with css can get fairly tricky and confusing when the nests get exstensive. I at least think it's a good practice to align the main table in the tag itself. I can make for ease of getting things to look the way you want them

set the styles then to the nested tables. ---------------------------------------
{ str = &quot;sleep is good for you. sleep gives you the energy you need to function&quot;;
ptr = /sleep/gi;Nstr = str.replace(ptr,&quot;coffee&quot;alert(Nstr); }

http://www.onpntwebdesigns.com

 

[onpnt]

boy, did I start typing yesterday.
I hope you can read that

sorry for the typos, I think you got it though ---------------------------------------
{ str = &quot;sleep is good for you. sleep gives you the energy you need to function&quot;;
ptr = /sleep/gi;Nstr = str.replace(ptr,&quot;coffee&quot;alert(Nstr); }

http://www.onpntwebdesigns.com

 

[sparklemuffin]

None of this is working!! Do I need to add space above and below the table or something? In 1024x768 it is still aligning to the top.

I feel like I've tried everything and can't get anything to work. Any more suggestions?

Thanks.
Becca

 

[sparklemuffin]

Well I figured it out ...

I had to set the height of the outer table to 100%. I'm not sure if this will work on all the browsers or not though...

 

[onpnt]

yes it will work on all browsers

With out really seeing all the code you ahve thus far explaining the alignment of the content of a table is simply explaining the alignment. Next time show the code. IT gives us something to work off of what the real root problem is. ---------------------------------------
{ str = &quot;sleep is good for you. sleep gives you the energy you need to function&quot;;
ptr = /sleep/gi;Nstr = str.replace(ptr,&quot;coffee&quot;alert(Nstr); }

http://www.onpntwebdesigns.com

 

[BDNFLNC]

No. It won't work everywhere.

Becca, Check oout

http://www.badinfluence.com.

I di dthe same as you, used a nested table with the outer being 100%x100%.

It works everywhere except old Netscape versions.

Seems effective enough though. Served my purposes anyway.

 

[BDNFLNC]

I don't know what happened with that post! Crazy form.

http://www.badinfluence.com

 

[onpnt]

OK, everywhere that really matters.


I bet that starts something ---------------------------------------
{ str = &quot;sleep is good for you. sleep gives you the energy you need to function&quot;;
ptr = /sleep/gi;Nstr = str.replace(ptr,&quot;coffee&quot;alert(Nstr); }

http://www.onpntwebdesigns.com

 

[BDNFLNC]

hahahah.

You should get a star for just that comment alone onpnt!