using HTML or CSS to center stuff?

[bluemicrobyte]

I'm trying to get an item centered on the page both horizontally and vertically. The item is a table of unspecified size with unspecified contents. I've seen this done before, but I can't seem to figure out how to get the table vertically centered on the page.

[Dayoh]

In HTML its <center> before the thing u want centered and then close it with </center> that should work.
Im not sure how to do it in XML, if this doesent work reply (i should know how to do it with me doing this web design course lol)

[Jeff]

Centering horizontally is easy but I think if you want to center vertically you have to use CSS. Do some searching for valign or vertical-align and you should be able to figure it out. Good luck.

[bluemicrobyte]

I'm already able to center something horizontally, and I've been searching for a solution on google and in our IRC channel but I haven't been able to figure it out yet. But I HAVE seen it before......

[pixels]

i think what i use is margins.. 50% all the way around seems to work.

[bluemicrobyte]

Tried that - 50% will put the upper right corner of the table in the exact middle of the page - I want the exact middle of the table in the exact middle of the page.

[pixels]

surround it in a div with the margins instead?

*shrug*

[bluemicrobyte]

could you give me some specific code to test? I've tried tons of things and can't seem to figure it out.

[GrassDragon]

If I remember correctly it should look something like this:

body {
text-align: center;
}
#content {
text-align: left;
}
Can't remember if those are the exact commands but I'm sure you get the idea. #content should go on the outside of everything to be centered to make the text align left like normal. Make sure your content has a fixed width (e.g. specified in pixels) or it won't work.

[bluemicrobyte]

My content never has fixed values. (or at least not in this situation).

Anyways, I found the following HTML code will make everything centered both horizontally and vertically - but you have to delete the doctype comment that dreamweaver adds or it wont work for some reason.


<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<tbody><tr>
<td align="center" valign="middle">



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

[GrassDragon]

As long as the content is not unlimited in size (e.g. it'll fill the page if there's enough) the above code should work. But if that works, it works.

[Modred]

http://www.w3.org/Style/Examples/007/center.html
That's from w3.org, on centering things with CSS. The horizontal makes sense, but I'm not entirely sure how the vertical works. But they link to an example with vertically aligned div tags, so check it out.