Centering a page in CSS

hitman · 04-24-2005, 11:53 PM

I don't really understand how it works.
Do you just put
{margin:0;text-align:center;}

or have an absolute positioning, then manually find the right centered position?

If you choose the first option, how about the containers, images ect...? Wouldn't you have to manually move them anyway? So why choose an automatic centering?

For the second option, will this work on every browsers? Would there be any case where the layout would be messed up?

Spekta · 04-25-2005, 05:19 AM

you should use margin: auto not margin: 0, and it should work for every browser. using both options will allow both text and images, containers etc to be aligned

genious · 04-25-2005, 11:15 PM

Ok, I don't know about every1 else but i rarely use margin in my css/css2
coding, I normally use align:{left/center/right} and text-align:{left/center/right} you could use margin:50% but then it will mess your page
up I say just use the simple but yet easy method which has been long supported. by every version of html <center></center> i simply suggest you
use <center></center> or align and align can be with almost every tag. like
for example <div><body><table>and<span>

rimian · 04-30-2005, 09:14 AM

centre aligning with CSS can be troublesome. text-align only aligns text like it says.

if you're aligning your webpage to the centre then you should use a table with one cell 100% with and aligned center. i've heard a lot of people talking about tables being outdated. they're really good for that kind of thing

branwen · 05-08-2005, 07:04 PM

Originally Posted by hitman

I don't really understand how it works.
Do you just put
{margin:0;text-align:center;}

or have an absolute positioning, then manually find the right centered position?

If you choose the first option, how about the containers, images ect...? Wouldn't you have to manually move them anyway? So why choose an automatic centering?

For the second option, will this work on every browsers? Would there be any case where the layout would be messed up?

The best thing to do would be to make a div for the page

div.foo { margin-top: 0px; margin-left: auto; margin-right: auto; }

foo=whatever you want the class to be. You can add however many px to the top margin. As far as I know, you can't center it vertically.
So the html would be like this
<div class="foo">
(in here put whatever thing you want in your page,
and give them classes of their own for their positioning within the div)
????: NamePros.com http://www.namepros.com/programming/85066-centering-a-page-in-css.html
</div>

You will want to give your div a width and height, too.

I hope this helps!

df-sean · 05-14-2005, 07:06 PM

The tried and true method:

html, body {
margin: 0;
padding: 0;
text-align: center; /*for IE stupidity*/
}

#container {
position: relative; /*The container must be positioned
/*in order to contain positioned
/*elements*/
margin: 0 auto; /*This is the proper way to center an element*/
text-align: left; /*corrects for IE hack*/
}

hitman · 05-18-2005, 05:10 AM

Wow! Excellent! Thanks a lot!

df-sean · 05-18-2005, 05:12 AM

Happy to help

04-24-2005, 11:53 PM	THREAD STARTER #1 (permalink)
hitman NamePros Member Join Date: Feb 2005 Posts: 82	Centering a page in CSS I don't really understand how it works. Do you just put {margin:0;text-align:center;} or have an absolute positioning, then manually find the right centered position? If you choose the first option, how about the containers, images ect...? Wouldn't you have to manually move them anyway? So why choose an automatic centering? For the second option, will this work on every browsers? Would there be any case where the layout would be messed up?

04-30-2005, 09:14 AM	#4 (permalink)
rimian New Member Join Date: Apr 2005 Location: Sydney Australia Posts: 12	centre aligning with CSS can be troublesome. text-align only aligns text like it says. if you're aligning your webpage to the centre then you should use a table with one cell 100% with and aligned center. i've heard a lot of people talking about tables being outdated. they're really good for that kind of thing __________________ Web Developer

05-14-2005, 07:06 PM	#6 (permalink)
df-sean NamePros Member Join Date: May 2005 Location: Osaka, Japan Posts: 37	The tried and true method: html, body { margin: 0; padding: 0; text-align: center; /for IE stupidity/ } #container { position: relative; /The container must be positioned /in order to contain positioned /elements/ margin: 0 auto; /This is the proper way to center an element/ text-align: left; /corrects for IE hack/ } __________________ :::: ÂDataFly.Net Â:::: Rock-Solid Linux Web Hosting http://www.datafly.net

05-18-2005, 05:12 AM	#8 (permalink)
df-sean NamePros Member Join Date: May 2005 Location: Osaka, Japan Posts: 37	Happy to help __________________ :::: ÂDataFly.Net Â:::: Rock-Solid Linux Web Hosting http://www.datafly.net

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Page Rank 5 Site with Banner and Text Links!! MUCH MORE! High Traffic Sites	ebizcraftsman	Advertising & SEO Services	0	12-09-2004 10:43 PM
Five-Day .INFO SALE - Part Five - 133 Domains Including StockResearch.info	Duke	Domains For Sale - Make Offer	0	03-31-2004 12:49 PM
CSS Help - Universal Printer Page Margins?	desrev1	Programming	1	03-03-2004 02:24 AM
Prime .INFO Sale - Part Five - 122 Domains Including StockResearch.info	Duke	Domains For Sale - Make Offer	2	02-22-2004 06:07 PM
Shopping & Retail Domains In All Extensions ON SALE - Many Nice One-Worders!	Duke	Domains For Sale - Make Offer	0	12-29-2003 05:06 PM

04-25-2005, 05:19 AM	#2 (permalink)
Spekta NamePros Member Join Date: Jan 2005 Posts: 92	you should use margin: auto not margin: 0, and it should work for every browser. using both options will allow both text and images, containers etc to be aligned

04-25-2005, 11:15 PM	#3 (permalink)
genious Account Suspended Join Date: Apr 2005 Posts: 27	Ok, I don't know about every1 else but i rarely use margin in my css/css2 coding, I normally use align:{left/center/right} and text-align:{left/center/right} you could use margin:50% but then it will mess your page up I say just use the simple but yet easy method which has been long supported. by every version of html <center></center> i simply suggest you use <center></center> or align and align can be with almost every tag. like for example <div><body><table>and<span>

05-18-2005, 05:10 AM	THREAD STARTER #7 (permalink)
hitman NamePros Member Join Date: Feb 2005 Posts: 82	Wow! Excellent! Thanks a lot!

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)