Sign in to follow this  
Jarrod1937

[web] how to center div?

Recommended Posts

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 this post


Link to post
Share on other sites
Quote:
Original post by capn_midnight

<div align="center">blah</div>
What browser are you using? When I do that in FireFox the div stays left-aligned and the text inside is centered.

Share this post


Link to post
Share on other sites
Quote:
Original post by DigiDude
Quote:
Original post by capn_midnight

<div align="center">blah</div>
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 this post


Link to post
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 this post


Link to post
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 this post


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

<div align="center">blah</div>
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 this post


Link to post
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

<div align="center">blah</div>
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 this post


Link to post
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 this post


Link to post
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 this post


Link to post
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 this post


Link to post
Share on other sites
Quote:
Original post by tstrimp
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;"


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 this post


Link to post
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 this post


Link to post
Share on other sites
Quote:
Original post by Sander
Regular 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 this post


Link to post
Share on other sites
Quote:
Original post by benryves
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
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?

Share this post


Link to post
Share on other sites
Quote:
Original post by DigiDude
Quote:
Original post by benryves
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
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 this post


Link to post
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 this post


Link to post
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?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this