Centering a website..!! - Freelance UK Forums

demo_man · 04-03-2009, 03:40 PM

Hi All

Could any one out there please advise me on how to center a website equally from top to bottom. I've done this before with centering left to right. The site I have in mind is around 700px height, 2500px width and would scroll from left to right. No space would be required from either the left or right.....if that makes any sense!!!

Cheers Guys

Leon

nkelly19 · 04-04-2009, 02:29 AM

Centering your page in the HTML code:

Open the html web page in a text editor or an html editor (in an html editor go to the view that shows the source code).

hello............

Near the top of the code, locate the tag for the main table

Type align="center" within the table tag.

File > Save to save your changes.

Centering your page in CSS:

Open the .css file that came with your template in a text editor or html editor

Locate the BODY section (usually near the top). If there is no BODY section already written, create one.

Type:

BODY{

}

Within the Body section, type:

margin-left: auto;
margin-right: auto;
text-align: center;

Note: "text-align: center" centers your entire web page, not just text. This line is necessary for many browsers that do not recognize the "margin auto" commands.

File > Save to save the .css file.

h_freezy · 04-08-2009, 11:34 AM

i'll give it a try

cheers!

snazzy · 04-09-2009, 02:42 AM

margin: 0 auto; works in all browsers as far as I am aware unless you know better, its a far better solution.

demo_man · 04-10-2009, 10:55 AM

I've tried the above suggestions but to no avail with what I'm trying to achieve.

Please view the website in question posted below. I would like the site to center equally in between the top and bottom of the browser.

ROAR Collective-Sheffield Creative Design Company

Cheers

Leon

FuriousJason · 04-15-2009, 01:52 PM

I think the problem is that the suggestions so far are about horizontal centering, and I think you want to know about vertical centering.

This used to be the "go to" link about vertical centering with CSS:
Dead Centre

More recently, this has become popular too:
Vertical Centering in CSS

Another method is forcing a containing table's height to 100% and then setting the valign attribute of the cell (td tag) to middle, but I this sort of layout manipulation using tables is deprecated, and hardcore table-haters will frown upon you.

modelsandmoguls · 04-16-2009, 04:45 AM

I agree with FuriousJason: tables are meant for table data, whereas css and divs are meant for style elements such as alignment, centering, etc.

aflatone · 05-14-2009, 03:11 PM

Hello,
You can use this code

Quote:

#content {
width: 700px ;
margin-left: auto ;
margin-right: auto ;
}

Gareth10 · 07-16-2009, 08:42 AM

You will have to play with the css a little to your exact requirements, but this is pretty much what you need...

-------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unpublished Website</title>
<style>

#container {
width:460px; /* - change this figure to suit -*/
position: absolute;
top: 50%;
left: 50%;
margin-left: -250px; /* - change this figure to suit -*/
margin-top: -140px; /* - change this figure to suit -*/
text-align:center;
}
</style>
</head>
<body>
<div id="container">
put your content here
</div>
</body>
</html>

Adam FC · 07-26-2009, 10:08 AM

Quote:

Originally Posted by aflatone

Hello,
You can use this code

#content {
width: 700px ;
margin-left: auto ;
margin-right: auto ;
}

I second this technique; I use it for almost all of the site's I develop.

04-03-2009, 03:40 PM	#1 (permalink)
demo_man Regular Poster Join Date: Feb 2008 Location: Barnsley,South Yorkshire Posts: 21	Centering a website..!! Hi All Could any one out there please advise me on how to center a website equally from top to bottom. I've done this before with centering left to right. The site I have in mind is around 700px height, 2500px width and would scroll from left to right. No space would be required from either the left or right.....if that makes any sense!!! Cheers Guys Leon __________________ L2 Design Solutions

04-10-2009, 10:55 AM	#5 (permalink)
demo_man Regular Poster Join Date: Feb 2008 Location: Barnsley,South Yorkshire Posts: 21	Thanx for your reply's I've tried the above suggestions but to no avail with what I'm trying to achieve. Please view the website in question posted below. I would like the site to center equally in between the top and bottom of the browser. ROAR Collective-Sheffield Creative Design Company Cheers Leon __________________ L2 Design Solutions

04-15-2009, 01:52 PM	#6 (permalink)
FuriousJason New Poster Join Date: Apr 2009 Posts: 3	Vertical Centering I think the problem is that the suggestions so far are about horizontal centering, and I think you want to know about vertical centering. This used to be the "go to" link about vertical centering with CSS: Dead Centre More recently, this has become popular too: Vertical Centering in CSS Another method is forcing a containing table's height to 100% and then setting the valign attribute of the cell (td tag) to middle, but I this sort of layout manipulation using tables is deprecated, and hardcore table-haters will frown upon you.

07-16-2009, 08:42 AM	#9 (permalink)
Gareth10 New Poster Join Date: Jul 2009 Posts: 3	Cleanest way of sorting this problem You will have to play with the css a little to your exact requirements, but this is pretty much what you need... ------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Unpublished Website</title> <style> #container { width:460px; /* - change this figure to suit -/ position: absolute; top: 50%; left: 50%; margin-left: -250px; / - change this figure to suit -/ margin-top: -140px; / - change this figure to suit -*/ text-align:center; } </style> </head> <body> <div id="container"> put your content here </div> </body> </html>

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

04-04-2009, 02:29 AM	#2 (permalink)
nkelly19 New Poster Join Date: Apr 2009 Posts: 1	Centering your page in the HTML code: Open the html web page in a text editor or an html editor (in an html editor go to the view that shows the source code). hello............ Near the top of the code, locate the tag for the main table Type align="center" within the table tag. File > Save to save your changes. Centering your page in CSS: Open the .css file that came with your template in a text editor or html editor Locate the BODY section (usually near the top). If there is no BODY section already written, create one. Type: BODY{ } Within the Body section, type: margin-left: auto; margin-right: auto; text-align: center; Note: "text-align: center" centers your entire web page, not just text. This line is necessary for many browsers that do not recognize the "margin auto" commands. File > Save to save the .css file.

04-08-2009, 11:34 AM	#3 (permalink)
h_freezy New Poster Join Date: Apr 2009 Location: london Posts: 5	i'll give it a try cheers!

04-09-2009, 02:42 AM	#4 (permalink)
snazzy New Poster Join Date: Apr 2009 Location: England ( uk to some ) Posts: 3	margin: 0 auto; works in all browsers as far as I am aware unless you know better, its a far better solution.

04-16-2009, 04:45 AM	#7 (permalink)
modelsandmoguls New Poster Join Date: Apr 2009 Location: Canada Posts: 4	I agree with FuriousJason: tables are meant for table data, whereas css and divs are meant for style elements such as alignment, centering, etc.