HTML Div Help

[RyuuJin Silver]

Hello,

First of all I would like to say this is a great layout and has helped me a lot. Now, on to my question. :lol:

I cant seem to get my divs to always align to the center of the page.

body {
background-color:#e6e6e6;
}

#header {
position:absolute;
top:0px;
}

Thats the CSS...this works okay, it simply aligns the DIV to the absolute top like I wan't it to.

<div align="center" id="header"> <img src="images/index_01.gif" /></div>

Unfortunately it does not align to the center of the screen though... I'm not sure why. Any ideas? Any help is appreciated.

[MidiMagic]

The problem is that the deprecators in W3C took away the center tag, and left us with nothing easy to replace it with in CSS. They are thinking in terms of newspaper-style publishing, where the text is important, and the image is an obstruction the text must wrap around.

There is a way to do it. You have to be sneaky.

In the style section or style sheet:

.cenimg {text-align: center;
         margin-top: 0px;
         margin-bottom: 0px;
         padding: 0px;}
.centim {clear: both;}

At the point where the image belongs:

<div class="cenimg">
<img src="picture.jpg" alt="a picture" class="centim" />
</div>

The sneaky trick is that the div doesn't know (or care) whether its contents are text or image. It centers everything. The clear is needed to keep the image from seeking the left or right edge, and the rest is there to keep the div from otherwise messing things up.

You can also put a p block above or below the image with a caption.

[MattEvans]

text-align:center; in CSS is an extremely easy replacement for center; in the way you just suggested. A div with text-align:center; works pretty much exactly the same as <center>. As such, there's no real need for <center> in modern HTML versions. I'd say <center> is more functionally obsolete than neccessarily deprecated for a good reason.

The problem is always aligning things to the vertical center =P You can do it using hacky absolute positioning tricks in CSS, using hacky style-overrides in JavaScript; or you can make a giant table and use a vertical-align:center; TD. Still. Giant tables don't always work properly in true DOCTYPE (X)HTML (1+)4+.

[MidiMagic]

The need for the center tag is the space saved, compared to adding all of that style code for each centered object. When the ISP charges you by the megabyte of storage space, believe me, it matters.

[MidiMagic]

It also makes a difference in how many users can download the page before your download limit is exceeded.

[MattEvans]

Heck I still like the center tag.

I see it as a bonus of sorts, if a page looks as close as possible to how it looks with a stylesheet as it does without one.

So, I've started CSS-aligning blocks, then putting center tags inside, then putting data.

Q: Hey isn't that terrible for accessibility?! people might not want to see your titles/subtitles/copyright statements in the middle of their page?
A: Well, they didn't have to click to my site ^_-