By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,729 Members | 1,523 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,729 IT Pros & Developers. It's quick & easy.

What is the best way...

P: n/a

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
Jul 20 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
"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)
Jul 20 '05 #2

P: n/a
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)

Jul 20 '05 #3

P: n/a
"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.'
Jul 20 '05 #4

P: n/a
"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)
Jul 20 '05 #5

P: n/a
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
Jul 20 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.