Centering Web Pages

TomMiller

New member
Joined
Aug 1, 2006
Messages
3
Programming Experience
1-3
How do I center my web pages like Yahoo.com?

Yahoo.com will always show their pages centered. Doesn’t matter the resolution you are using.

Thank you

Tom
 

TechGnome

Well-known member
Joined
May 23, 2005
Messages
896
Programming Experience
10+
put everything in a div tag... the nset the style of that div tag to "margin: auto;"

-tg

edit: ahh.... but that's only going to work if you also set the width to someting.
 

ImDaFrEaK

Well-known member
Joined
Jan 7, 2006
Messages
416
Location
California
Programming Experience
5-10
If that don't work then inside the Div Tag or my preference a table if needed put the alignment to center like so.

This worked for me.

VB.NET:
[SIZE=2][COLOR=#0000ff]<[/COLOR][/SIZE][SIZE=2][COLOR=#800000]div[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]    <[/COLOR][/SIZE][SIZE=2][COLOR=#800000]table [/COLOR][/SIZE][SIZE=2][COLOR=#ff0000]align[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]="center" [COLOR=black]...[/COLOR][/COLOR][/SIZE]
 

JohnH

VB.NET Forum Moderator
Staff member
Joined
Dec 17, 2005
Messages
15,602
Location
Norway
Programming Experience
10+
Use CSS for html style formatting.
HTML:
<body style="text-align: center">
 

ImDaFrEaK

Well-known member
Joined
Jan 7, 2006
Messages
416
Location
California
Programming Experience
5-10
I tried that but when I use that version it wants to center the text on everything within it also. How do I stop that from happening? The answer I provided allowed me to implement and center the table on the page without centering all the text and images ect within it. Maybe I just did something wrong but I tried "text-align: center;" first. What I am doing is centering the MasterPage thus centering everything within the masterpage to the screen. Maybe you've had the problem I had and know a workaround. But for now align="center" worked perfectly.
 

JohnH

VB.NET Forum Moderator
Staff member
Joined
Dec 17, 2005
Messages
15,602
Location
Norway
Programming Experience
10+
Using a table for layout sections is sometimes practical. I also usually put the CSS directives in the header as style tag for page specific formatting or most often as linked style sheet for site specific formatting. Example centering page but left aligning table cells:
HTML:
<head>
<style>
body {text-align: center}
td {text-align: left}
</style>
</head>
 

ImDaFrEaK

Well-known member
Joined
Jan 7, 2006
Messages
416
Location
California
Programming Experience
5-10
Now, I have a question John. I used CSS formatting via VS which does one object at a time. How do I make a CSS like the one you listed above and then use it accross my whole website. I have read bits about it and understand it but never implemented CSS on my own. If it'd simple can you give me a quick tutorial? If not I will just re-read my the section of my book on CSS and figure it out. I'm not sure how much trouble it is to implement. Anyways, I am working 12's no days off and this is about the closest I can get to programming or learning.
 

Paszt

Staff member
Joined
Jun 3, 2004
Messages
1,500
Location
Raleigh, NC - USA
Programming Experience
Beginner
To create the stylesheet in VS, right click on the project in solution explorer and click Add New Item; select StyleSheet. The stylesheet editor in VS has intellisense and style building dialogs that can help you create the CSS styles. With the stylesheet created, you can drag the stylesheet file from the solution explorer in to the head section of a page's markup and VS will create the appropriate link. If you are using master pages, you can set the link there.
 

JohnH

VB.NET Forum Moderator
Staff member
Joined
Dec 17, 2005
Messages
15,602
Location
Norway
Programming Experience
10+

ImDaFrEaK

Well-known member
Joined
Jan 7, 2006
Messages
416
Location
California
Programming Experience
5-10
Right on guys. I really appreciate it and I just found out about w3schools days ago. I've been going through a lot of their tutorials. They have been quite helpful. I wish they had more .NET related tutorials but even the older sessions help you understand the new. I would like a good ADO.NET tutorial.
 

LookitsPuck

Active member
Joined
Jan 23, 2007
Messages
37
Programming Experience
3-5
You need to set the width of the parent container (html, body) to 100%. Put the things you want to be centered in a div, then have a style or class with this CSS:

VB.NET:
margin: 0px auto;
 

silky

New member
Joined
Aug 14, 2008
Messages
3
Programming Experience
Beginner
Right on guys. I really appreciate it and I just found out about w3schools days ago. I've been going through a lot of their tutorials. They have been quite helpful.
 

Bryce Gough

Active member
Joined
Mar 8, 2011
Messages
36
Location
Perth, Australia
Programming Experience
1-3
The easiest way is to just use the center tags:
VB.NET:
<center>Your Text</center>

Or you can do the whole page like this:
VB.NET:
<html>
 <head>
<title>My Page</title>
</head>
  <body>
<center>
Your Page Contents
</center>
</body>
</html>

:D
 

JohnH

VB.NET Forum Moderator
Staff member
Joined
Dec 17, 2005
Messages
15,602
Location
Norway
Programming Experience
10+
Center tag was depreciated from the Html standard in 1998, css recommended.
It also won't solve the problem being discussed in this thread (4 years ago!).
 
Top Bottom