2 replies [Last post]
Anonymous
Anonymous's picture
Guru
calgary,alberta
calgary,alberta

I am trying to center a style sheet so that it is centered regardless of the browser or resolution with which it is viewed. I am new to web development and I would appreciate any assistance. Thank you.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 1 hour ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Centering a style sheet

Hi Jen,
This topic should help: [url]http://www.csscreator.com/css-node/308url]

Flocke
Offline
newbie
Mainz, Germany
Last seen: 16 years 19 weeks ago
Mainz, Germany
Timezone: GMT+1
Joined: 2003-07-25
Posts: 1
Points: 0

Centering a style sheet

Hi Jen,

first of all, you should put all your website-elemenst into one wrapping-div.
Let's just call it #wrap.

If you only want to center div#wrap horizontally, you should set the left and right margins on "auto". Looks like:

#wrap {width: 400px; margin-left: auto; margin-right: auto; margin-top: 20px; }

If you want it centered both horizontuically and vertically, it's like that:

#wrap {
position: absolute;
left: 50%;
top: 50%;
width: 500px;
height: 400px;
margin-left: -250px;
margin-top: -200px;
}

The trick is dairly simple: First of all you position the wrapping div absolutely. With the relative measures of each 50% from left and top, the DIVs left-top-corner is situated right in the middle of the page. But that's not exactly where you want it. So now you must tell the browser the exact dimensions of your box [which was not the case in the first example, whre onle the width was known!] and move the DIV to the left and the top by adding a nagative margin to both directions, which is exactly the half of each the width and the height.

Puuuh, I hope I explained it in a understandable way.

Greetings from Germany,

Jens Grochtdreis