What is the best way...

[Tony Vasquez]

What is the best way to center one, or more DIVs in the browser window?
Can someone give me a quick code snipplette. I need something that will
center the DIV, for all sorts of awkward screen resolutions. Remeber, with
that said, I need it to be centered in the BROWSER window, not the screen.
User must be able to resize his browser window to anything though. Anywho,
if you need more info, let me know, and thanks in advance.

Tony

[Michael Winter]

"Tony Vasquez" wrote on 12/11/2003:

What is the best way to center one, or more DIVs in the browser window? Can someone give me a quick code snipplette. I need something that will center the DIV, for all sorts of awkward screen resolutions. Remeber, with that said, I need it to be centered in the BROWSER window, not the screen. User must be able to resize his browser window to anything though. Anywho, if you need more info, let me know, and thanks in advance.

Assuming this is as simple as you describe it, I have three words for
you: Cascading Style Sheets. You can do it two ways:

Add this to the document HEAD:

<STYLE type="text/css">
<!--
.centre {
text-align: center;
}
-->
</STYLE>

Then, for every element that needs to be centred, add the 'class'
attribute like so:

<DIV class="centre">Your content</DIV>

Alternatively, you can do this:

<DIV style="text-align: center">Your content</DIV>

That 'style' has to be copied into every element to be centred, just
like 'class' above.

As you can probably tell, this has nothing to do with JavaScript.
This is just a way to replace the depreciated CENTER element. If
you're referring to centring layers, and other things that aren't part
of normal HTML structure, then you need to explain exactly what you're
doing.

Mike

--
Michael Winter
M.Winter@[no-spam]blueyonder.co.uk (remove [no-spam] to reply)

[Tony Vasquez]

Okay, well... I guess I came off like I don't know much, but here is what I
need. I need a script to VERTICALLY align, and horozontally align my DIV
(which I use for the BODY of my web site). So, I mostly need to know how to
get the same effect as maybe a putting it in a table cell and adding
valign=middle to it. Thing is, this web site is table-less.... no tables.
If you need further info, please let me know.

Tony

"Michael Winter" <M.Winter@[no-spam]blueyonder.co.uk> wrote in message
news:%b********************@news-text.cableinet.net...

"Tony Vasquez" wrote on 12/11/2003:

What is the best way to center one, or more DIVs in the browser

window?

Can someone give me a quick code snipplette. I need something that

will

center the DIV, for all sorts of awkward screen resolutions.

Remeber, with

that said, I need it to be centered in the BROWSER window, not the

screen.

User must be able to resize his browser window to anything though.

Anywho,

if you need more info, let me know, and thanks in advance.

Assuming this is as simple as you describe it, I have three words for
you: Cascading Style Sheets. You can do it two ways:

Add this to the document HEAD:

<STYLE type="text/css">
<!--
.centre {
text-align: center;
}
-->
</STYLE>

Then, for every element that needs to be centred, add the 'class'
attribute like so:

<DIV class="centre">Your content</DIV>

Alternatively, you can do this:

<DIV style="text-align: center">Your content</DIV>

That 'style' has to be copied into every element to be centred, just
like 'class' above.

As you can probably tell, this has nothing to do with JavaScript.
This is just a way to replace the depreciated CENTER element. If
you're referring to centring layers, and other things that aren't part
of normal HTML structure, then you need to explain exactly what you're
doing.

Mike

--
Michael Winter
M.Winter@[no-spam]blueyonder.co.uk (remove [no-spam] to reply)

[Lasse Reichstein Nielsen]

"Michael Winter" <M.Winter@[no-spam]blueyonder.co.uk> writes:

"Tony Vasquez" wrote on 12/11/2003:
Assuming this is as simple as you describe it, I have three words for
you: Cascading Style Sheets. You can do it two ways:

Add this to the document HEAD:

<STYLE type="text/css">
<!--
.centre {
text-align: center;
}
-->
</STYLE>
In a standard compliant browser, this will *not* center a div, as the
orignal poster wanted. The property "text-align" should only affect
inline child elements of the element it is applied to.

IE has a bug that makes text-align work on block level children as
well. There is some amount of luck in that, IE's prior to version 6
couldn't understand the correct way to center a block level element
(margin:auto).

So, to center a div in the viewport of a standards compliant browser:

<style type="text/css">
.center {
width:200px;
height:200px;
position:fixed;
top:0px;
right:0px;
bottom:0px;
left:0px;
margin:auto;
}
</style>

IE<6 won't understand a word of it, sadly, and IE 6 still doesn't
understand position:fixed. It will center horizontally, though.

You can use tricks with negative margins

<style type="text/css">
.center {
position:fixed;
height:200px;
top:50%;
margin-top:-100px;
width:200px;
left:50%;
margin-left:-100px;
}
</style>

It is dangerous, though. If there is not enough room for the element,
it will be partyl outside the top or left edge of the browser, and
you can't scroll it into view.
As you can probably tell, this has nothing to do with JavaScript.

That would be the worst possible way to center, indeed. Mostly because
it doesn't work at all with Javascript turned off.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

[Michael Winter]

"Lasse Reichstein Nielsen" wrote on 12/11/2003:

"Michael Winter" <M.Winter@[no-spam]blueyonder.co.uk> writes:

"Tony Vasquez" wrote on 12/11/2003:
Assuming this is as simple as you describe it, I have three words for you: Cascading Style Sheets. You can do it two ways:

Add this to the document HEAD:

<STYLE type="text/css">
<!--
.centre {
text-align: center;
}
-->
</STYLE>
In a standard compliant browser, this will *not* center a div, as

the orignal poster wanted. The property "text-align" should only affect
inline child elements of the element it is applied to.

IE has a bug that makes text-align work on block level children as
well. There is some amount of luck in that, IE's prior to version 6
couldn't understand the correct way to center a block level element
(margin:auto).

So, to center a div in the viewport of a standards compliant browser:
<style type="text/css">
.center {
width:200px;
height:200px;
position:fixed;
top:0px;
right:0px;
bottom:0px;
left:0px;
margin:auto;
}
</style>

IE<6 won't understand a word of it, sadly, and IE 6 still doesn't
understand position:fixed. It will center horizontally, though.

You can use tricks with negative margins

<style type="text/css">
.center {
position:fixed;
height:200px;
top:50%;
margin-top:-100px;
width:200px;
left:50%;
margin-left:-100px;
}
</style>

It is dangerous, though. If there is not enough room for the element, it will be partyl outside the top or left edge of the browser, and
you can't scroll it into view.

As you can probably tell, this has nothing to do with JavaScript.
That would be the worst possible way to center, indeed. Mostly

because it doesn't work at all with Javascript turned off.

I apologise for that nonsense then. I guess that's what happens when
you develop with only one, particularly broken browser.

Mike

--
Michael Winter
M.Winter@[no-spam]blueyonder.co.uk (remove [no-spam] to reply)

[Thomas 'PointedEars' Lahn]

Tony Vasquez wrote:

Okay, well... I guess I came off like I don't know much, but
here is what I need. I need a script to VERTICALLY align, [...]
Feed `CSS vertical align' to (y)our friend(!) Google
[Top post]

and stop doing that:
http://www.netmeister.org/news/learn2quote.html
PointedEars