Informative Writings
» Easy Method for Centering in CSS
Quite often, I see people “centering” their layouts by splitting in half their resolution’s width and then positioning their layout from the left by that many pixels. What generally happens is their finished product ends up not being centered at all. What’s worse is that some people have extremely large resolutions, and in using the aforementioned method, they unknowingly cause the layout to sidescroll in smaller resolutions.
Another common trend I see is the usage of the out-of-date <div align="center">.
For those of you who know, W3, the people who created the web,
state that “div align” is incorrect, as is the <center> tag. If you can,
you should try abiding by the new guidelines W3 sets forth. In doing so, you can make your webpage more
accessible and easier to read for browsers, and you can also rest assured with the knowledge that what
you’re doing is structurally correct. If you don’t care about what is correct, then you might
as well not read on, but for those of us who actually care about efficiency and would like to avoid using
tags that are slowly being phased out, a better method for centering is necessary.
Luckily for us, the centering effect can easily be achieved with a class or an ID (and it can work in all resolutions, too!)
Please note that if you have no idea what an ID or a class is, this tutorial may be a bit too advanced for you at the moment. You can easily learn the basics by visiting CSS Basics. If you don’t learn the basics first but continue reading, any confusion that could possibly arise from this sentence onward is not my problem.
Here’s how it’s done.
Firstly, let’s say my entire layout is wrapped in a div with an ID of “layoutwrapper”. If you have a layout that isn’t wrapped in a div, you can easily put a div around one like I’ve done. It’s as simple as that!
Here’s how it would look:
<div id="layoutwrapper"> - layout code here. I’m too lazy to make the markup for a fake layout. It’s unimportant anyway, I guess. - </div>
But we have to remember that a div with an ID is useless unless we style it in our css, right? In your stylesheet, show that you plan on styling an ID by “opening” it up:
#layoutwrapper{
Now, here’s where it might get a little tricky. Remember that when you’re centering something like this, you have to give whatever you’re centering a set width. Let’s now suppose that my layout is 750px wide. I’ll make my div 750px wide then.
#layoutwrapper{
width:750px;
Now, we have to do the magic trick that makes it centered! What we’ll do is set our margins, or the space surrounding the div, to “auto”, so it would be “margin:auto”. Remember that your browser automatically centers whatever you’re giving “margin:auto”; don’t ask why.
However, since we only want “auto” to affect the left and right sides of the div, we’ll need to specify that we don’t want any margins on the top or bottom, so it would be like this: “margin:0 auto 0 auto”. When abiding by the rules of CSS Shorthand (it just shortens the code to save space), we can shorten that to “margin:0 auto”. While I do want you to fully understand it, if you don’t, that’s fine for the time being. Just add “margin:0 auto” to the code.
#layoutwrapper{
width:750px;
margin:0 auto;
Now let’s close the bracket!
#layoutwrapper{
width:750px;
margin:0 auto;
}
There’s one more thing we have to do. Internet Explorer 5 (an ancient version of IE) doesn’t really respond to the “auto” value, but luckily for us, when we use “text-align:center” on a selector in IE5, everything contained is aligned to the center (not just text!). Therefore, we can take advantage of this flaw in the browser version and apply “text-align:center” to the immediate surrounding tags. In this case, that would mean applying “text-align:center” to the body tags in the css:
body{
text-align:center;
}
Since the body tag contains everything we can see on the page, in IE5, the layout will be centered.
If you’re trying to center smaller things within a layout rather than a layout itself, you can use the same trick. Just remember that you apply “margin:0 auto” to whatever you’re centering. Then, you apply “text-align:center” to a div (or another container) that immediately surrounds whatever you’re centering. It’s that simple!