[web] how to center div?

Recommended Posts

in html, how do you tell your div to be centered at all resolutions?

Share on other sites
you have to set the margin like this:

<div style="width:[width here]; margin: 0 auto;></div>

you can change the 0 to whatever you want. (Not really HTML but CSS is your friend [smile])

Share on other sites
<div align="center">blah

or

<div style="position:relative;left:25%;right:25%">blah2

cool, thanks.

Share on other sites
Quote:
 Original post by capn_midnight
blah

What browser are you using? When I do that in FireFox the div stays left-aligned and the text inside is centered.

Share on other sites
Quote:
Original post by DigiDude
Quote:
 Original post by capn_midnight
blah

What browser are you using? When I do that in FireFox the div stays left-aligned and the text inside is centered.

That's what it *should* do. The margin: auto is the correct way to do it, but IIRC Internet Explorer doen't like it (no surprise here...)

Share on other sites
well after further use, the div now seems to be aligning itself to the left. using capn_midnights example. any more help?
edit: yeah, it behaves like DigiDude said. i'll try your example digidude.

Share on other sites
i got it working, thanks for the help.

Share on other sites
Many "Lounge Lizards" don't know there are other forums on GameDev, including the Web Development Forum [wink]. And yes, <div align="center">blah</div> it is.

Share on other sites
Quote:
 Original post by Rob LoachAnd yes,
blah
it is.

No no, that centers the content of the div.

Share on other sites
Ah, I'd been needing this! I usually end up sticking my real div inside a div align:center div, which just seemed needless.

Share on other sites
Quote:
Original post by Sander
Quote:
Original post by DigiDude
Quote:
 Original post by capn_midnight
blah

What browser are you using? When I do that in FireFox the div stays left-aligned and the text inside is centered.

That's what it *should* do. The margin: auto is the correct way to do it, but IIRC Internet Explorer doen't like it (no surprise here...)
Only in quirks mode. Just stick any old doctype in and it works fine.

Share on other sites
Quote:
Original post by benryves
Quote:
Original post by Sander
Quote:
Original post by DigiDude
Quote:
 Original post by capn_midnight
blah

What browser are you using? When I do that in FireFox the div stays left-aligned and the text inside is centered.

That's what it *should* do. The margin: auto is the correct way to do it, but IIRC Internet Explorer doen't like it (no surprise here...)
Only in quirks mode. Just stick any old doctype in and it works fine.
I used an HTML 4 doctype and an XHTML doctype and it still didn't work.

Share on other sites
I just stick <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> on as that's what my editor defaults to and have no problems whatsoever.
Note that it's the very first on the page that is sent to the browser (no whitespace).
Example

Share on other sites
To complete the list of options, another way of centering a (fixed width) div is to place its left side at 50% and then move it half its width back to the right by setting a negative margin:
<div style="position:relative;">  <div style="position:absolute;width:500px;left:50%;margin-left:-250px;">centered</div></div>

Share on other sites
The align attribute for div was depreciated in 4.01. It is now not supported in XHTML 1.0 Strict. The "correct" way is with an auto margin on the left and right. Or to put it within a div that has
style="text-align: center;"

Share on other sites
Quote:
 Original post by tstrimpThe align attribute for div was depreciated in 4.01. It is now not supported in XHTML 1.0 Strict. The "correct" way is with an auto margin on the left and right. Or to put it within a div that has style="text-align: center;"

I would suggest doing this, as I have found most cross-browser rendering problems come from using margins, even between firefox and opera. As long as I avoid using the margin stylings completely, everything renders mostly the same.

Share on other sites
Regular margin styling has never been a problem for me. Using negative margings can get a bit funky at times though.

Share on other sites
Quote:
 Original post by SanderRegular margin styling has never been a problem for me. Using negative margings can get a bit funky at times though.

It wasn't for me until I realized that for some reason my floated divs were dropping below the left hand column in IE. Also known as the IE double margin bug.

Share on other sites
Yeah, I found out about that one the hard way myself as well [grin]

Share on other sites
Quote:
 Original post by benryvesI just stick on as that's what my editor defaults to and have no problems whatsoever.Note that it's the very first on the page that is sent to the browser (no whitespace).Example
Nope, that doesn't work either. I looked at the example page but I don't see any <div align="center">'s or is that not what I'm supposed to be looking for?

Moved to web dev

Share on other sites
Quote:
Original post by DigiDude
Quote:
 Original post by benryvesI just stick on as that's what my editor defaults to and have no problems whatsoever.Note that it's the very first on the page that is sent to the browser (no whitespace).Example
Nope, that doesn't work either. I looked at the example page but I don't see any <div align="center">'s or is that not what I'm supposed to be looking for?
It did use the auto margin left and right, though (the page element in the stylesheet).

Share on other sites
You should *always* use a valid doctype.

Now do this is your stylesheet:

body {text-align:center;}
div#myDiv {margin: 0px auto;}

(0px top and bottom margin; "auto" means "divide the horizontal space around me evenly between my left and right sides"
-the rule for the body centers the div element in IE
-the rule for the div centers the div everywhere else

Don't use <div align="center">. This is an outdated method and tends to cause more problems than it solves.

Share on other sites
Well the fellow asked for an HTML answer and not a CSS one..

doesn't the old
<center>  <div>    contentblahcontent  </div></center>
Still work?

Create an account

Register a new account

• Forum Statistics

• Total Topics
627711
• Total Posts
2978744

• 21
• 14
• 12
• 36
• 30