0

I'm designing a website and this is the last piece I need before I can upload it. I've searched this site and many others, but I honestly can't find the right solution. I'll be as specific as I can.

www.solarfields.com This is as good of an example as any. I want to align my content just like his, in the middle of the webpage. He uses Flash, however, and I'd like to keep mine to HTML and CSS. I have encompassed the entire body of my site in a tag with these attributes:

#body {
    position:absolute;
    top:13%;
    left:25%;
    width:350px;
}

It's centered on my monitor (1600x900), but I want it to appear centered on all resolutions.

The size: 525px (h) x 350px (w).

I more than one <div>.

I don't care about browser compatibility.

I don't want visible borders.

There's one table 801px wide. It has two <td>'s, 29px and 762px wide.

I'm a CSS noob, so I'm just giving random information. If you need anything else, don't hesitate to e-mail me @ mattjack66@gmail.com.

Thanks so, so much.

Matthew Jack
  • 1
  • 1
  • 1
  • Have you tried: `body { margin: 0 auto; }`? Try looking here: http://stackoverflow.com/questions/963636/why-cant-i-center-with-margin-0-auto –  Mar 13 '11 at 06:16
  • body { margin: 0 auto; } simply sticks it in a corner. i'm trying the links out. – Matthew Jack Mar 13 '11 at 06:42
  • oh! the 2nd link worked for aligning the outer
    (thanks!!!), but not the nested ones. i'm working on that...
     – Matthew Jack Mar 13 '11 at 06:46

3 Answers3

1

Horizontally and vertically centered:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <style type="text/css">
                body div {
                    position: absolute;
                    top: 50%;
                    left: 0;
                    right: 0;
                }
                body div div {
                    position: relative;  
                    top: -262px;
                    height: 525px;                 
                    width: 350px;
                    margin: 0 auto 0;
                    background: #000;
                }
        </style>
    </head>
    <body>
        <div><div>Testing</div></div>
    </body>
</html>
jsonnull
  • 415
  • 3
  • 12
  • thanks, this is a great start. but that just puts it in the top left corner. i deleted my #body code and added yours. – Matthew Jack Mar 13 '11 at 06:34
  • I used body not #body, just replace this and make sure your body has two divs in it. Believe it or not this does work and it will center it, promise. – jsonnull Mar 13 '11 at 06:53
1

If you set margin: 0 auto; on a div that also has a width set, it will center within it's parent container.

To be more specific, take the following css:

div#body {
    width:902px;  //Or whatever your content width is
    margin:0 auto;
    padding:0;
}

and apply that class to the outer most div in your site:

<html>
    <body>
        <div id"body">
            ...The rest of your content...
        </div>
    </body>
</html>

What this does is set the top and bottom margins of #body to 0, and the left and right margins to automatically distribute the empty space between them; which centers that div on the page. This applies a left / right center.

Infotekka
  • 10,307
  • 2
  • 20
  • 17
0

Solution: http://jsfiddle.net/magicaj/Xd7sK/5/

Centering horizontally is easy, you just need to set margin:0 auto; on the element you want centered. However getting an element to center vertically is much more difficult. There are CSS only solutions out there that mimic what tables can already do using the vertical-align:middle; CSS. I always strive to use tables only for tabular data but in this case I find tables for layouts is acceptable:

HTML: 

<table class="wrapper">
    <tr>
        <td>
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in  lobortis ante. Phasellus rhoncus, magna adipiscing consequat viverra,  nibh lectus eleifend neque, eget fermentum massa mauris id felis. Morbi  aliquet fermentum quam ut sollicitudin.
            </div>
        </td>
    </tr>
</table>

CSS:

html, body, .wrapper {
    height:100%;   
}

.wrapper {
    margin: 0 auto; /* center horizontally */
}

.wrapper td {
    height:100%;
    vertical-alignment: middle; /* center vertically */   
}

.content {
    width: 350px;
    background:#ccc;
}
Adam Ayres
  • 8,732
  • 1
  • 32
  • 25