ansaurus

Question

How can I position a web page in the middle of the screen?

Answer 1

A:

shsteimer 2009-03-25 20:20:45

As cheezy as this answer sounds, I have yet to see a browser that it DOESN'T work perfectly fine on..

Eric Petroelje 2009-03-25 20:24:53

Question asks for CSS, as far as I can read.

strager 2009-03-25 20:31:41

i suppose id didn't thoroughly read the question, and i almost put something in my answer saying its not the most elegant, or a css solution. that being said, it will work.

shsteimer 2009-03-26 13:54:37

Answer 2

+1 A:

Put all of your content in a container and give it a margin: 0 auto

zac 2009-03-25 20:21:33

Answer 3

+7 A:

You can use margins to position it in the center horizontally.

Given this html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
  <head></head>
  <body>
    <div id="page"> ... content ... </div>
  </body>
</html>

The CSS can be as simple as:

#page {
  margin-left:auto;
  margin-right:auto;
  width:960px;
}

You also need to make sure you have a valid doctype for this to work.

Zack Mulgrew 2009-03-25 20:22:09

You only need a valid doctype for it to be understood properly by IE. However, I don't think IE6 understands auto margins.

strager 2009-03-25 20:23:19

I do believe that IE6 understands auto margins if there is a valid doctype present. At least in version 6.0.2900.2180.xpsp_xp2_gdr.080814-1233. Wow that was a mouth full.

Zack Mulgrew 2009-03-25 20:27:58

@strager: it can, but you have to use a little css hack where you text-align:center the parent (the body in this case) and then put it back to text-align:left; on the element you want to center.

Joel Coehoorn 2009-03-25 20:29:02

@Zack - Auto margins worked for me in two different patched versions of IE6 (afraid I don't have the versions to hand)

Russ Cam 2009-03-25 20:29:57

@Coehoorn, That doesn't make auto margins work. It's a workaround using flaws in IE's understanding of text-align.

strager 2009-03-25 20:32:41

Answer 4

A:

<div style="width: 800px; margin: 0px auto;">
  your content here
</div>

Check this page if you want horizonal and vertical alignment: http://www.wpdfd.com/editorial/thebox/deadcentre2.html

Lennart 2009-03-25 20:22:19

Answer 5

+4 A:

Create a <div> in your <body> like so:

<body>
<div id="main">

<!-- ... -->

</div>
</body>

And add the following CSS:

body {
    text-align: center; /* IE */
}

#main {
    margin-left: auto;
    margin-right: auto;
    text-align: left;   /* IE */
    width: XXX;         /* Fill this out. */
}

strager 2009-03-25 20:22:22

Answer 6

A:

wrap it all in a div with margin: auto and make body have text-align: center.

William 2009-03-25 20:22:24

ansaurus

tags:

views:

answers:

How can I position a web page in the middle of the screen?

related questions