Gamerz Posted December 31, 2009 Share Posted December 31, 2009 So I need help centering a DIV box...how would I do this? Here is the box...feel free to try it: <div style="border:1px solid; width:650px; height:200px; overflow:auto;"> <div class="image"> <a href="lol.php"> <img src="folder_icon.jpg" alt="image" class="gradualfader" style="border: 0px dashed black;" width="50" height="50"/> <p>ECL Fall '09</p></a> </div> <div class="image"> <a href="lol.php"> <img src="folder_icon.jpg" alt="image" class="gradualfader" style="border: 0px dashed black;" width="50" height="50"/> <p>Geophysical Science</p></a> </div> <div class="image"> <a href="lol.php"> <img src="folder_icon.jpg" alt="image" class="gradualfader" style="border: 0px dashed black;" width="50" height="50"/> <p>Math</p></a> </div> </div> Link to comment https://forums.phpfreaks.com/topic/186779-html-center-a-div-box/ Share on other sites More sharing options...
cags Posted December 31, 2009 Share Posted December 31, 2009 Set "margin: 0 auto;" in the CSS (I think it's that way around anyway, if that doesn't work try it the otherway round, I always forget what order the parameters are in, I don't use CSS enough for it to stick in my mind). Link to comment https://forums.phpfreaks.com/topic/186779-html-center-a-div-box/#findComment-986353 Share on other sites More sharing options...
Gamerz Posted December 31, 2009 Author Share Posted December 31, 2009 I tried it, and it doesn't work. Same thing. What is the other way around? Link to comment https://forums.phpfreaks.com/topic/186779-html-center-a-div-box/#findComment-986572 Share on other sites More sharing options...
rajivgonsalves Posted December 31, 2009 Share Posted December 31, 2009 try margin-left: auto ; margin-right: auto ; Link to comment https://forums.phpfreaks.com/topic/186779-html-center-a-div-box/#findComment-986579 Share on other sites More sharing options...
Gamerz Posted December 31, 2009 Author Share Posted December 31, 2009 That doesn't work either..on IE, it makes it go more to the right, while on mozilla firefox nothing happens. Link to comment https://forums.phpfreaks.com/topic/186779-html-center-a-div-box/#findComment-986581 Share on other sites More sharing options...
vinpkl Posted January 1, 2010 Share Posted January 1, 2010 can you post an online link to the page. or post your full page code, full html. vineet Link to comment https://forums.phpfreaks.com/topic/186779-html-center-a-div-box/#findComment-986675 Share on other sites More sharing options...
cags Posted January 1, 2010 Share Posted January 1, 2010 That doesn't work either..on IE, it makes it go more to the right, while on mozilla firefox nothing happens. Since my code and rajivgonsalves are two different ways of writing the same thing, I don't see how you can have got a different result. Link to comment https://forums.phpfreaks.com/topic/186779-html-center-a-div-box/#findComment-986718 Share on other sites More sharing options...
wildteen88 Posted January 2, 2010 Share Posted January 2, 2010 For auto margins to work correctly make sure you are using a valid DOCTYPE and you have set the width for the .image class selector, eg .image { width: 50px; height: 50px; } Link to comment https://forums.phpfreaks.com/topic/186779-html-center-a-div-box/#findComment-987298 Share on other sites More sharing options...
haku Posted January 3, 2010 Share Posted January 3, 2010 You may also have some absolute positioning set on the divs in question. Auto-margins won't work with absolute positioning. Link to comment https://forums.phpfreaks.com/topic/186779-html-center-a-div-box/#findComment-987425 Share on other sites More sharing options...
TheFilmGod Posted January 6, 2010 Share Posted January 6, 2010 Set "margin: 0 auto;" in the CSS (I think it's that way around anyway, if that doesn't work try it the otherway round, I always forget what order the parameters are in, I don't use CSS enough for it to stick in my mind). Are you a programmer or do you use tables? Link to comment https://forums.phpfreaks.com/topic/186779-html-center-a-div-box/#findComment-989320 Share on other sites More sharing options...
cags Posted January 6, 2010 Share Posted January 6, 2010 I'm more back end than design. I'm guilty of sometimes using tables for layout, but generally only for forms. For some reason I can just never remember what order the properties go for border, margin etc. in CSS. Probably because I use them so infrequently. Link to comment https://forums.phpfreaks.com/topic/186779-html-center-a-div-box/#findComment-989483 Share on other sites More sharing options...
ignace Posted January 6, 2010 Share Posted January 6, 2010 Are you a programmer or do you use tables? ??? Link to comment https://forums.phpfreaks.com/topic/186779-html-center-a-div-box/#findComment-989551 Share on other sites More sharing options...
Miko Posted January 8, 2010 Share Posted January 8, 2010 For centering a div you must use: position: relative; margin: 0 auto; Link to comment https://forums.phpfreaks.com/topic/186779-html-center-a-div-box/#findComment-991016 Share on other sites More sharing options...
haku Posted January 8, 2010 Share Posted January 8, 2010 There is no need for position relative. It can actually cause problems by including it, as it may cause the div to react strangly in other situations. Link to comment https://forums.phpfreaks.com/topic/186779-html-center-a-div-box/#findComment-991085 Share on other sites More sharing options...
darken15 Posted January 9, 2010 Share Posted January 9, 2010 <!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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title></title> <style type="text/css"> body { text-align: center; } #page-wrap { margin: 0 auto; border:1px solid; width:650px; height:200px; overflow:auto; text-align: left; } </style> </head> <body id="homepage"> <div id="page-wrap"> <div class="image"> <a href="lol.php"> <img src="folder_icon.jpg" alt="image" class="gradualfader" style="border: 0px dashed black;" width="50" height="50"/> <p>ECL Fall '09</p></a> </div> <div class="image"> <a href="lol.php"> <img src="folder_icon.jpg" alt="image" class="gradualfader" style="border: 0px dashed black;" width="50" height="50"/> <p>Geophysical Science</p></a> </div> <div class="image"> <a href="lol.php"> <img src="folder_icon.jpg" alt="image" class="gradualfader" style="border: 0px dashed black;" width="50" height="50"/> <p>Math</p></a> </div> </div> </body> </html> These code will make your div centered. Link to comment https://forums.phpfreaks.com/topic/186779-html-center-a-div-box/#findComment-991560 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.