How can I center a page in HTML?
Asked by
Link (
327
)
June 10th, 2009
What’s the best way to center a page in HMLT/XHTML?
-Link
Observing members:
0
Composing members:
0
19 Answers
The CSS purists are going to start shooting for sure. But if your page is less-than-pure in that sense, I say to do the following:
<body>
<table border=“0” width=“100%” border=“0” cellpadding=“0” cellspacing=“0”>
<tr>
<td align=“center”>
your content here
</td>
</tr>
</table>
</body>
If you also want vertical centering, you add height=“100%” to the table properties, and valign=“middle” to the td properties. In this case, if it doesn’t work, it is probably because you have (in my case, generated from Photoshop exports) a bunch of code at the top that inhibits the height to work well, you probably will be able to remove it without harmful effects (I give no guarantees, I never had any problem). The code will be something like:
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en”>
There may be a way to make this work without removing this block of code, perhaps setting a 100% height property to the body by CSS, or something like that. I’ve “been there” some time ago.
Happy publishing ; -)
I do everything inside a table with a fixed width of 800 so I can control the layout and proportions while making sure it’s not too big for anybody’s screen. Then I just center the table with a click.
@rexpresso yes im going to start shooting now haha, the best way to center a page is to wrap all your content in a div and give the div a class, and using css set that div class margin to ‘0 auto’...like so
.wrapper {
margin:0 auto;
padding:0;
width:800px;
}
@Jeruba – you know I love ya, but I am learning this stuff right now and your conflicting with what I am being taught and what seems logical to me.
@rexpresso – I have to go with you.
@wenn That’s a nearly perfect answer; you might want to also include that in some Internet Explorer versions that don’t understand the margin: 0 auto; trick, you can apply “text-align: center;” to the body, and make sure on your wrapper you declare “text-align: left;”. This stems from Internet Explorer’s poor use of the text-align statement, whereby it will align block elements. Standards compliant browsers will simply ignore the rule, but still require the text to be left aligned on the wrapper.
There is zero need to put it in a table. I hihgly recommend doing it in CSS versus a table. Because, you can do it in CSS, and you should if you intend to be a true web designer. Tables are best left for tabular data. This is the way the pros do it. In reality, the client doesn’t care if you use CSS or tables, but the next person who edits that site sure will.
Sure you can bring and use an abacus in your calculus class… but just cause you can doesn’t mean you should. It’s the same principle with tables versus CSS. Tables were used back when browsers didn’t agree on standards. In today’s world, the major browsers tend to display things very similarly with the exception of IE because Microsoft sucks big time and hate doing things the right way. Luckily IE8 is mostly W3C compliant, so once everyone upgrades to it and IE6/7 use drops off, we will no longer have to add little CSS tricks to get IE to display things right.
@Jeruba Fixed width 800 is too big for an 8×6 monitor, the size which many projectors still use. Reducing it down to 760 ensures compatibility.
Sup DYNAMICDUO! Thanks to everyone for helping. I’m learning CSS on a daily basis, but I really just wanted to figure this out. I suspected it would have something to do with a div and a class/id, but I wanted to know what the pros thought. Anyway, I’m going to adjust with the times and go with CSS. Thanks WENN and everyone else for the help.
-Link
@Link – Hey link, I am learning HTML and CSS right now to. I am 4 classes into an intense course and loving it. Our assignment for this week is to go up to a web site, click on the first page, hit cmd or ctrl a (depending on if your a mac or pc) and paste that in between the body tags of a template. Then recreate the look of the page with place holders for any multimedia or video we can’t get.
Nice job dude. I’m learning HTML and CSS on my own, which has it up and down sides. I’ve yet to learn to put multimedia in my documents. I’m anxious to learn though. I wish I could just download all there is to know about HTML and CSS into my brain like Neo downloaded Kung Fu in the Matrix. Anyways man keep at it. All we have to do is believe in the process.
-Link
www.lynda.com has some good stuff.
I just needed a person to help me pull it together. I figured out video, audio and print programs but I could not figure out this. I know how to prepare graphics, audio and the like for the web. I know how to do Flash animations and buttons. I just couldn’t figure this stuff out.
If you figure the Matrix approach out count me in.
@CSSPPL, cool, nice to learn ;-)
@Bri I’ll be rich if I figure that out lol. Anyway good luck man, and I might be seeking you out if I need help.
-Link
Blessings on all you who are doing it the right way or learning how. I maintain my own web sites and use whatever tricks I’ve figured out on my own. So don’t listen to me.
@Jeruba – well the thing is, they work for you. And your the one who is keeping them up. Besides, in the end there are just preferred ways depending on your circumstances. Your way is right on for you!
@Bri_L No—ultimately, web designers are going to do things the way they want to, but these standards exist to coax them into doing it the “right” way. It’s not just called the right way because a group of academics got in a room and standardized it, but because this way makes the internet more widely available and accessible than with pages that revolve around presentation, even in the HTML code.
@noyesa – I said the right way for her. If she creates a web page as best she knows how and tests it in all the main browsers back to IE6 or further and it functions, it is the right way for her. Not everyone has or can take the time to progress their knowledge of such things.
Your application of quotes around the word right removes the word from its context in my sentence.
If you were to ask me “What would the “right” way be to accomplish the task” I would, and did, provide a different answer.
She wasn’t posting it as the only way or the “right way”, just a way, her way. There was plenty of evidence above, evidence that I agreed with as indicated, that there was a better way for those learning.
@Bri_L I meant “right” as in the consensus of that which is right throughout the web design community, which is the standards-based approach. I’m not referring to anything you said. “Right” is always a subjective thing, so I thought it deserved quotes.
The attitude that “I’m not a professional so I have no reason to embrace web standards” is the reason it is taking so long to make the web a universally accessible medium. Standards-based design is no more complicated than table-based layout. In my opinion, it is easier, since the concept of separating form and function, and imagining a web site as a canvas and elements as objects that can be moved around at will are more in line with how one designs a website in an image editor, on paper, or in his or her head.
There is no personal right way to code a web page; there is a right way and there is a wrong way, and using HTML elements for reasons other than their semantic meaning, namely presentation, is the wrong way.
@noyesa – That attitude is not what I described. Nor is your opinion any different from mine. But just because I can use FinalCutPro to edit video does not mean that I expect everyone else to. It is as ridiculous to expect every one to be able to make the same commitment you have to learning the code as it would be for me to expect them to put time in on learning to draw if they were making homemade cards.
There is indeed a personal right way to code a web page. One that functions in all main browsers, works for your abilities, budget, content and target audience.
I am afraid you and I will have to disagree on this.
Designers often want to have an image or even the entire page dead-centered vertically and horizontally within the viewport (the area the browser uses to render a page). This is easy using tables and the height attribute (which although has widespread support, has never been in any HTML specification).
There are two solutions to this, the best CSS2 way and the works-in-IE way…
Solution 1: The Official CSS2 Way
Although it wasn’t a part of the original CSS2 specs, in the errata it states you can set margins to auto on an absolutely positioned element to center it, like this:
.centered {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 50%;
height: 50%;
margin: auto;
background-color: red;
color: white;
}
(try it in your browser)
…which should then result in <div class=“centered”>bleh</div> being positioned right in the middle of the viewport. It works fine in Gecko and Opera 7, but sadly not in IE/win.
Solution 2: The “It (sort-of) Works in IE” Way
This is hackish, apparently renders nothing at all on IE/mac, and makes the content goes off the edge of the screen if the browser window is too small. Not that ideal then…
.centered {
position: absolute;
top: 50%;
left: 50%;
margin-top: -25%;
margin-left: -25%;
background-color: red;
color: white;
}
That’s the best I’ve seen, I’m afraid. Maybe one day I’ll try combining the two solutions (maybe with some script?) and coming up with something that works much better, but for the moment, that’s your lot.
Answer this question 
This question is in the General Section. Responses must be helpful and on-topic.
Composing members:
0
