[web] how to center div?
Ah, I'd been needing this! I usually end up sticking my real div inside a div align:center div, which just seemed needless.
Quote:Original post by SanderOnly in quirks mode. Just stick any old doctype in and it works fine.Quote:Original post by DigiDudeQuote:Original post by capn_midnightWhat browser are you using? When I do that in FireFox the div stays left-aligned and the text inside is centered.<div align="center">blah</div>
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...)
Quote:Original post by benryvesI used an HTML 4 doctype and an XHTML doctype and it still didn't work.Quote:Original post by SanderOnly in quirks mode. Just stick any old doctype in and it works fine.Quote:Original post by DigiDudeQuote:Original post by capn_midnightWhat browser are you using? When I do that in FireFox the div stays left-aligned and the text inside is centered.<div align="center">blah</div>
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...)
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
Note that it's the very first on the page that is sent to the browser (no whitespace).
Example
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>
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;"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 hasstyle="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.
Regular margin styling has never been a problem for me. Using negative margings can get a bit funky at times though.
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.
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
