Dysan Posted June 14, 2008 Share Posted June 14, 2008 hi, I have the following code, that displays a div. How do you display it so it is the centre of the screen? Similar to Yell.com <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> body { MARGIN: 18px; PADDING: 0px; } div { WIDTH: 45.4em; HEIGHT: 25.5em; BORDER: 4px solid rgb(0,0,0); BACKGROUND: rgb(255,255,255); } </style> </head> <body> <div></div> </body> </html> Quote Link to comment Share on other sites More sharing options...
haku Posted June 14, 2008 Share Posted June 14, 2008 Give the div a width, then set the right and left marigns to zero. You will end up with something like this: div { width: 100px; margin: 0 auto; } Of course, that will give ALL your divs the same width and center them, so you will need to specify which div. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted June 17, 2008 Share Posted June 17, 2008 If you don't set what the relational body font size is (MUST NOT BE PX BASED!!!), how can you control any relationally based declared sizing? Based on your body element, just what is "1em"??? You are not giving the relational font size - thereby allowing the browser to decide what the default should be. Always VERY dangerous to a layout to let the browser default decide how it should look;even worse in IE6 and Opera. At least give it a relative "keyword" font size of "small" which all browsers understand and roughly display close to @ 12px. Then at least you can base the em sizing on a known relation @12px. AND, if you are going to use em based width sizing, then it is best to also use percentage or em for right and left margin/padding - using px right and left margin/padding can cause trouble with liquid/elastic floated elements when relational fonts are involved. body { font-size: small; margin: 1.2em; padding: 0px; } And, a last note - if you are going to use XHTML 1.1 Strict, shouldn't you get into the habit of using lowercase naming conventions for your css? You don't have to, but it seems as if you may as well use HTML 4.01 Strict - which will let you even code markup in uppercase - if that makes you more comfortable. Quote Link to comment Share on other sites More sharing options...
Mr.Shawn Posted June 18, 2008 Share Posted June 18, 2008 div { width: 250px; /* any width you like */ margin: 0px auto; position: relative; } Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted June 18, 2008 Share Posted June 18, 2008 div { width: 250px; /* any width you like */ margin: 0px auto; position: relative; } He doesn't need to specify position:relative. So long as he specifies a width smaller than the parent container, AND "margin:0 auto", the id will center. Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted June 20, 2008 Share Posted June 20, 2008 You also need to set the body parameters. #body { margin: 10px auto 30px auto; font-family: Arial, Helvetica, sans-serif; font-size: 12px; } You are encouraged to use em for the font size if you'd like the website to scale properly, but for simplicity I put font-size: 12px; then: #main_div { margin: 0 auto; width: 200px; } Html: <body> <div id="main_div"> <p>CONTENT</p> </div> </body> ...................... You must put content in the div for it to show up in the page! - unless you specify an exact height, which is discouraged. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted June 23, 2008 Share Posted June 23, 2008 Actually, for the body font-size to be a relative element it needs to be either a percentage or a keyword (small, medium). Setting a fixed pixel font-size for the body will not work in IE6 for setting relative font-sizes (ems, percentage, keywords). If you set a fixed pixel body font-size, it will not be elastic in IE6 ... it will always stay 12px and will not resize if the browser font size is increased or decreased. Quote Link to comment Share on other sites More sharing options...
dellmerca Posted March 24, 2014 Share Posted March 24, 2014 margin: 0 auto; The above code will make your div on center. full source .. http://www.corelangs.com/css/box/center-div.html kerry 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.