Horizontal + Vertical Centering of Div Content [Archive]

View Full Version : Horizontal + Vertical Centering of Div Content

wyclef

May 3rd, 2005, 02:41 PM

Is this the best method to use for centering horizontally and vertically in browser without using tables?

http://www.wpdfd.com/editorial/thebox/deadcentre4.html

simplistik

May 3rd, 2005, 03:09 PM

Yes

wyclef

May 3rd, 2005, 05:29 PM

but not all browsers like negative margins...

simplistik

May 3rd, 2005, 05:55 PM

You're right... but not all browsers display everything the exact same way either. The majority streamlined browsers do accept -margins though. I use them in sites all the time and I test in MAC, safari, ie, ff, ns as well as PC, ie, ff, ns... I don't test on Opera though.

3pinter

May 3rd, 2005, 06:08 PM

simplistik,

I used this code too for my .swf .... and it seems to affect my flash! I needed to manually reload the webpage (refreshing) in order to load my page.
Using images works great (start page of my website).

Did you encouter this problem... anybody else perhaps? Because right now I've used a table instead ...

:smirk:

simplistik

May 3rd, 2005, 06:21 PM

Shouldn't affect your flash in anyway. I have a site that's gonna be released soon (no not mine) that is using this technique, and as long as you have the correct width and height it shouldn't be a problem. I've never encountered any. But it my be glitchy on older browsers. ditt0 or someone else can prolly speak more intelligently into this than I can. But what problems are you gettin?

wyclef

May 3rd, 2005, 06:23 PM

The example I posted does not work in Mac IE 5.2.3

simplistik

May 3rd, 2005, 06:26 PM

Works fine for me....

3pinter

May 3rd, 2005, 06:58 PM

Simplistik,

At first time visiting: it show only the background,
2nd: background + some pictures
3: 2nd+menu
4. full

something like that.... It's really wierd. I changed it to a <table> and it worked fine. I've tested it on firefox & IE (latest versions)...

Perhaps I can upload the page tomorrow.

:smirk:

wyclef

May 6th, 2005, 12:52 PM

I see the problem...it doesn't work in Mac IE 5.2.3 when you upgrade the Doctype to XHTML Transitional...is there a way to fix this?

simplistik

May 6th, 2005, 01:35 PM

This uses a fixed div... which isn't the greatest way I don't think... but it does work :P

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Center All???</title>
<style type="text/css">
html {
display:table;
height:100%;
width:100%;
margin: 0px;
padding: 0px;
}
body {
display:table-cell;
text-align:center;
vertical-align:middle;
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bolder;
color: #333333;
}
.centerdiv {
position: fixed;
width: 400px;
height: 200px;
margin-left: -200px;
margin-top: -100px;
top: 50%;
left: 50%;
background-color: #f3f3f3;
}
</style>
</head>
<body>
<div class="centerdiv">YOUR TEXT OR OBJECT CAN GO HERE, BUT AN OBJECT
CAN'T BE LARGER THAN THE FIXED SIZE. SEEMS TO WORK CROSS BROWSER.</div>
</body>
</html>

wyclef

May 6th, 2005, 02:55 PM

are the HTML styles even necessary? thanks for looking into this simplistik, this is really helpful.

simplistik

May 6th, 2005, 03:16 PM

Hmm... yea I suppose it wouldn't be hu? I haven't tested it. Just when I think of centering I think of things needing a parent, and child to make it work... but I suppose it would work w/o it.

wyclef

May 6th, 2005, 04:35 PM

Simplistik, could you test this? I simplified it even further and it seems to work...it doesn't seem like vertical align middle really does anything so i took it out....i think fixed width divs might not be ideal but they would be perfect for what i'm doing because it's a fixed width design anyways...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Center All???</title>
<style type="text/css">
/*<![CDATA[*/
body {
text-align: center;
font-family: sans-serif;
}
.centerdiv {
position: fixed;
width: 400px;
height: 200px;
margin-left: -200px;
margin-top: -100px;
top: 50%;
left: 50%;
background-color: #ccc;
}
/*]]>*/
</style>
</head>
<body>
<div class="centerdiv">
<small>YOUR TEXT OR OBJECT CAN GO HERE, BUT AN OBJECT CAN'T BE LARGER THAN THE FIXED SIZE. SEEMS TO WORK CROSS BROWSER.</small>
</div>
</body>
</html>

simplistik

May 6th, 2005, 05:10 PM

wyclef

May 6th, 2005, 05:37 PM

actually, the vertical alignment seems to be a problem in Opera 7.5.4. It appears that it only resets the position on reload? I'm not that clear on this one. Also, i don't think this works in IE 6 either... :(

wyclef

May 9th, 2005, 11:24 AM

whatcha think? it kinda seems like the vertical centering via css ain't gonna happen the way I want it to. anyone have any thoughts on using the DOM to center vertically?

simplistik

May 9th, 2005, 12:11 PM

Umm... just don't use XHTML. If it's a simple layout it's not gonna kill anythin. The use of XHTML is just because it's more strict. Don't know why you need to make it more difficult that what it has to be :P sorta like using a table to center if you don't know how to use DIVs and CSS type of dealio.

wyclef

May 9th, 2005, 01:47 PM

i suppose...i don't know, it bugs me to not use XHTML

3pinter

May 10th, 2005, 02:32 PM

Okay Simplistik, I'm back.

Do you see my site correctly (after entering ofcourse)? Anyone else?

I have every now and then (I guess when my browsers cache is emptied) a blue background with only a part loaded from my flash .swf ...

How comes? It's extremely annoying!!

3Pinter
:smirk:

simplistik

May 10th, 2005, 03:11 PM

What OS and what browser? Looks fine on my Mac, but your centering script is messed up on Mac OSX IE. The site goes to the top.

senocular

May 10th, 2005, 03:43 PM

why doesnt css just have a friggen center attribute? Kind of p's me off the way css handles things sometimes.

wyclef

May 10th, 2005, 03:56 PM

seriously...it's well overdue.

3pinter

May 10th, 2005, 05:35 PM

senocular: AMEN!

Simplistik: WinXP, browser: IE and Firefox (both latest versions)_

Could it be my PC which is messing things up?

3Pinter
:smirk:

simplistik

May 10th, 2005, 05:49 PM

senocular: AMEN!

Simplistik: WinXP, browser: IE and Firefox (both latest versions)_

Could it be my PC which is messing things up?

3Pinter
:smirk:
Dunno... I'll check it when I get access to a PC.

3pinter

May 11th, 2005, 03:19 PM

tnx ... any others who don't get the proper load a my flash site?

3Pinter
:smirk:

wyclef

May 12th, 2005, 09:42 AM

what happens if u remove the doctype

3pinter

May 12th, 2005, 01:29 PM

Well, I don't want to ... because then it isn't w3c....

But it has something to do with the <div> or the css-coding because if I use a <table> it just works fine.

3Pinter
:smirk:

simplistik

May 12th, 2005, 01:39 PM

I checked it on my PC and it looks the same as it does on my MAC. One thing though I had to do on both platforms was refresh the page to get the flash to load.

3pinter

May 12th, 2005, 04:10 PM

Simplistik,

That's EXACTLY what goes wrong! It shows just my background then, after refreshing, it loads correctly...

That's odd ... isn't it?

3Pinter
:smirk:

wyclef

May 13th, 2005, 01:30 PM

try adding this to your styles...

object {
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
z-index: 1;
}

/** html object {
position: inline;
}*/

simplistik

May 13th, 2005, 02:02 PM

Simplistik,

That's EXACTLY what goes wrong! It shows just my background then, after refreshing, it loads correctly...

That's odd ... isn't it?

3Pinter
:smirk:
Try re-embeding the flash file... it's somethin to do w/ the flash and embeded coding, not really based on the DIVs and positioning. If it is though... that'd be very strange.

wyclef

May 17th, 2005, 06:26 PM

i think it is. i had a similar problem a while back with a couple browsers, and that was the fix. however, i'm probably wrong.