Jump to content

Centre Div in Middle of Screen


Dysan
 Share

Recommended Posts

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>

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

 

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.

 

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 5 years later...
This thread is more than a year old. Are you sure you have something important to add to it?

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.