5 replies [Last post]
PyroWest
Offline
newbie
Last seen: 17 years 51 weeks ago
Joined: 2004-08-25
Posts: 2
Points: 0

Hello, I can be considered a "newbie" when it comes down to CSS coding. I would like to know how to center your page using CSS. For example, no matter the resolution your page is centered.. I am not experienced with tables, so that option isn't really fit for me.

I read a few things on this forum, but I'd like to expirement with a few different (easy!) ways. Any ideas? Thanks so much.

Let's say I wanted to center this..

<body>

<img src="test.gif" />
<span>test</span>

</body>

What would I have to add?

justers
Offline
newbie
England
Last seen: 18 years 3 weeks ago
England
Joined: 2004-07-22
Posts: 8
Points: 0

Centering pages using CSS.

in your stylesheet add this....

 

body {
text-align:center;
}



if you use a container div, you can add this so that it stops everthing else from centering

#container {
text-align:left;
margin: 0 auto;
}

PyroWest
Offline
newbie
Last seen: 17 years 51 weeks ago
Joined: 2004-08-25
Posts: 2
Points: 0

Centering pages using CSS.

justers wrote:
in your stylesheet add this....

 

body {
text-align:center;
}



if you use a container div, you can add this so that it stops everthing else from centering

#container {
text-align:left;
margin: 0 auto;
}

Thanks that worked out, but what if I'm using absolute positioning to position my pages? How would I structure that so after it's all set in place it centers?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Centering pages using CSS.

PyroWest,
Why would you want to position the wrapper/container absolute, off hand I can't think of any good reasons (probably some) but can think of plenty of reasons why not . Just let the wrapper/ container lie in the default flow of the page ,static or relative.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

obsidian
Offline
Enthusiast
South Carolina
Last seen: 15 years 43 weeks ago
South Carolina
Joined: 2004-08-15
Posts: 136
Points: 0

Centering

pyrowest,
depending on the circumstances of the pages, i agree with hugo... i can't see any reason right off to absolute position and center on a page. the only absolute positioning i would recommend using off hand for a center based page is top positioning... i'm curious as to why you might use both, so please tell us where the difficulty lies and what specifically you are trying to do.

You can't win, you can't lose, you can't break even. You can't even get out of the game!

be4884
Offline
Regular
Evanston, Illinois
Last seen: 18 years 11 weeks ago
Evanston, Illinois
Timezone: GMT-6
Joined: 2004-05-29
Posts: 12
Points: 0

Centering pages using CSS.

I generally position everything on a webpage relative to the center of the monitor. If, for example, I want to horizontaly center an image that's 300 px wide, I would use the following style statement:

style="position:absolute;left:50%;margin-left:-150px;width:300px;"

After doing this, I'm able to place other elements exactly where I want them relative to the image in the center. Something that I want to be immediately to the right of the above image would be positioned as follows:

style="position:absolute;left:50%;margin-left:150px;"

This can also be done with vertcal positioning and can also be put in an external css file.

I'd be interested in comments.