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> Quote Link to comment 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). Quote Link to comment 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? Quote Link to comment Share on other sites More sharing options...
rajivgonsalves Posted December 31, 2009 Share Posted December 31, 2009 try margin-left: auto ; margin-right: auto ; Quote Link to comment 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. Quote Link to comment 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 Quote Link to comment 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. Quote Link to comment 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; } Quote Link to comment 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. Quote Link to comment 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? Quote Link to comment 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. Quote Link to comment 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? ??? Quote Link to comment 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; Quote Link to comment 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. Quote Link to comment 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.