Centering web page content : always in the center no matter what

autopost · Jan 10, 2008

Hi! 
 
Visit : 
 
<a class="postlink" href="http://www.thedigiport.com">http://www.thedigiport.com</a> 
<a class="postlink" href="http://www.onlinedigimon.com/site.php?goto=main">http://www.onlinedigimon.com/site.php?goto=main</a> 
 
Now, adjust your screen resolution to 1024 * 768. 
 
Notice that the web content of these 2 sites are in the middle of the web browser! How neat!

Can someone please show me how to achieve this? I would really appreciate it! Thanks!

<center> table </center>alot of people do still resort to the deprecated <center> tags, but there are other ways, nest all the content in a 100% div with text-align:center; in the style, to overcome some browser problems with inline & block level elements add another div inside the larger div but still holding the content (no need for this one to be 100%) and add margin;0px auto; to it's style, ie: 
 
<div style="width:100%;text-align:center;"> 
<div style="margin:0px auto;"> 
 
content 
 
</div> 
</div>

Thank you, Leo and Modulus!

Hi Leo! Below is my code : 
 
<HTML> 
<HEAD> 
<TITLE>1</TITLE> 
<META NAME="description" CONTENT="1"> 
<META NAME="keywords" CONTENT="1"> 
<META NAME="Generator" CONTENT="Cool Page version 2.7 Webmaster, Aug 11 2001 for Windows"> 
<BASE TARGET="_top"> 
<STYLE TYPE="text/css">BODY {margin-left:0; margin-right:0; margin-top:0;}</STYLE> 
<STYLE TYPE="text/css"> 
.Arial-16pxn {font:normal 16px Arial, sans-serif} 
</STYLE> 
</HEAD> 
 
<BODY SCROLL="auto" BGCOLOR="#FFFFFF" TOPMARGIN=0 LEFTMARGIN=0> 
 
<div style="width:100%;text-align:center;"> 
<div style="margin:0px auto;"> 
 
<DIV ID="idElement1" style="position:absolute; top:60px; left:3px; width:225px; height:300px;"><IMG 
 
SRC=http://www.htmlforums.com/archive/index.php/"Beelzemon_Blast_Mode.jpg" NAME="idElement1Img" ID="idElement1Img" WIDTH=225 HEIGHT=300 BORDER=0></DIV> 
 
<DIV ID="idElement4" style="position:absolute; top:364px; left:9px; width:199px; height:30px;"><TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=199><TR VALIGN=top><TD><DIV align=left>
 
CLASS=Arial-16pxn>Hi!!!!!!</DIV></TD></TR></TABLE></DIV> 
 
</div> 
</div> 
 
</BODY> 
</HTML> 
 
As you can see, there's a picture and a line of text on my web page. 
In the code highlighted above, the Red lines are the code you gave me and the Bolded lines are the content of my page. 
But still, it doesn't center!(appears at some weird positions instead) 
 
Hope you can help me again, Leo. 
Thanks!

Xeon.<DIV ID="idElement1" style="position:absolute; top:60px; left:3px; width:225px; height:300px;"> 
 
is where your problem lies 
 
its overriding the other positioning command.gregory is quite correct! 
position:absolute; breaks all other positioning, you'll have to change it a bit for the centering to work

Thanks guys!

But change the 'position:absolute' code for the centering to work? It seems that I've to compromise in the sense that if I wanna center the content on the web browser, I cannot place pictures at anywhere I like, right?

Seems that I 've choose between one? 
 
Hmmm....maybe the <center>...</center> can do it?

Originally posted by Xeon 
Thanks guys!

But change the 'position:absolute' code for the centering to work? It seems that I've to compromise in the sense that if I wanna center the content on the web browser, I cannot place pictures at anywhere I like, right?

Seems that I 've choose between one? 
 
Hmmm....maybe the <center>...</center> can do it?

well, give it a try, but i dont think it will work. 
 
my suggestion: stay away from absolute positioning, as it is very unpredictable on different browsers and resolutions.having a div with 100% width with text-align center will not center all content, it will center text but not any block elements, at least in any browser besides IE.Hi guys, 
 
 
<DIV ID="idElement1" style="position:absolute; top:60px; left:3px; width:225px; height:300px;"><IMG SRC=http://www.htmlforums.com/archive/index.php/"Beelzemon_Blast_Mode.jpg" NAME="idElement1Img" ID="idElement1Img" WIDTH=225 HEIGHT=300 BORDER=0></DIV> 
 
I took away the bolded code above, and added the <center>...</center> tages, and it works! 
 
But that has taken away my ability to put pictures where I want them, even after I've changed the top:60px and left:3px attributes. 
 
But on some web sites, though, I saw that they can actually have the best of both world : the whole web site is centered in the web browser, and the pictures can appear at flexible positions. 
 
Some examples are <a class="postlink" href="http://www.yahoo.com">http://www.yahoo.com</a> and <a class="postlink" href="http://www.altavista.com">http://www.altavista.com</a>. />
 
I've also heard about putting everything in a table and then centering the whole darn thing horizontally in the browser. 
 
In addition, I've got this code through one of the older posts in HTMLForums. Here it is : 
<style type="text/css" media="screen"> 
body { 
background-color:#fff; 
} 
#content { 
position:absolute; 
left:50%; 
width:760px; 
margin-left:-380px; 
background-color:#eee; 
text-align:left; 
} 
body>#content { 
margin-left:-380px; /* Correct value. */ 
} 
</style> 
</head> 
<body> 
<div id="content"> 
 
Could this be what suits me?

I'm pretty desperate now, so as long as it works, I don't really care too much.

Thanks! 
Xeon.

ok, at this point in your learning i think you should take yourself over to w3schools and have a look at their css positioning (<a class="postlink" href="http://www.w3schools.com/css/css_positioning.asp">http://www.w3schools.com/css/css_positioning.asp</a>) , you already know a bit, position:absolute; is css, don't worry it will be easy to pick up

Thanks Leo! But all the stuff there are pretty basic and fundamental, and they never mention anything about centering your page, but just stuff on "how to position text X-th pixels from the top of browser" etc.

Help! 
 
Also, there's this "liquid layout" technique that allows the web pages to fill the browser, I think. 
(go to <a class="postlink" href="http://www.gamefaqs.com">http://www.gamefaqs.com</a> and view it at a very high resolution) 
 
Thanks, 
Xeon.

I have a problem with this... 
 
On this (<a class="postlink" href="http://www.joshmccrain.com/autographhomepage2.htm">http://www.joshmccrain.com/autographhomepage2.htm</a>) page that menu on the left is placed by editing the pixel distance it is from the right and top of the screen. Well when you put a <center> around it and then change the size of teh actual page, the menu moves off of where it should be. Is there a way to get around this?

Centering web page content : always in the center no matter what

autopost

Guest