Can a layer be centered in the browser window?

Forum Moderators: not2easy

Message Too Old, No Replies

Can a layer be centered in the browser window?

Jon_King

4:09 pm on Dec 21, 2002 (gmt 0)

Can a layer be centered in the browser window? A relative position rather than absolute position?

WibbleWobble

4:50 pm on Dec 21, 2002 (gmt 0)

To a degree, yes, though I don't expect NS4 to support it, because it doesn't seem to adhere to anything.

setting margin-left & margin-right: auto on a layer usually centres it, or you could use position: absolute and declare the percentage of the window it should start at, and so on (hence, a layer with width: 50%, positioned at left: 25%, should centre.)

There's also the old text-align: center in the body element, to centre everything.
Glancing at my styles, those are the only ones I can see being used, to probably varying degrees of success.

Nick_W

4:52 pm on Dec 21, 2002 (gmt 0)

Good points! -- Do you mean horizontally or vertically though?

Nick

SuzyUK

4:57 pm on Dec 21, 2002 (gmt 0)

with pure CSS it's not very easy and there are many posts on this thread which explore different methods.

If you are a "table-less" fan then don't read any further ;)

If you're still reading then Yes it can be done but you need to use one teency weency table to "help" until CSS gets it right.

CSS:
body{
margin: 0;
padding: 0;
}

/* treat this as your new "body" tag */
table.container{
width: 100%;
height: 100%;
font-family: verdana, tahoma, arial, sans-serif;
font-size: 1em;
color: white;
background-color: black;
}
td.centered{
text-align: center;
vertical-align: center;
padding: 0 3em; /* adjust to suit */
}

#content{}

HTML:
<body>
<table class="container"><tr><td class="centered">

<div id="content">
<p>Your content here</p>
</div>

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

note: the td.centered is required as the table will not accept the vertical-align property

(sorry tableless fans ;))
Suzy
<added> CSS padding note </added>

Jon_King

5:26 pm on Dec 21, 2002 (gmt 0)

I needed to horizontally center a layer and was not aware that %'s are accepted args. I was under the impression that absolute px's were it! Now I know, and it worked perfectly.

Thanks,
Jon

WibbleWobble

10:18 pm on Dec 21, 2002 (gmt 0)

Vertical alignment is possibly the biggest problem with CSS in my eyes. Its notoriously hard to come by an acceptable way to do it, especially as browsers handle the properties differently. Thankfully, for the more content driven sites, alignment defaults to the top.

Indeed, IE and NS6 support an attribute called vertical-align which supports 8 different variables. Sadly, vertical-align isn't a w3c standard, and I strive to conform to that, regardless. Opera 6 and Mozilla variants are left out in the cold. And as I type this - having been fiddling with a test, it seems Mozilla doesn't actually support the CSS2 height variable.

I've not really fiddled with it then, as such, but the variables are:
baseline
sub
super
top
middle
bottom
text-bottom
text-top

Of course, with a little work, its possible to hash together vertical satisfaction by way of the position: style.

I think I'm somehow coming around to proving its a retched thing to deal with.

WibbleWobble

12:43 am on Dec 22, 2002 (gmt 0)

I've obviously not paid enough attention to some of the finer points of the standards I love so dearly, because it turns out vertical-align is an acceptable one. Go figure, and here was me thinking up complicated routes elsewhere.

I feel ridiculous. Tsch.

Jon_King

1:00 am on Dec 22, 2002 (gmt 0)

Thanks again WW.