How to center content with CSS and HTML
All too often I’ve found inexperienced designers using <table> tags to center content on a website, they always have the same reasoning and while I appreciate they didn’t know the proper way to do it, that’s no excuse.
First, let’s all accept that <table> tags are designed for one thing and one thing only … tabular data. You wouldn’t use a spread sheet to design a business card, so don’t use a table to design a website.
Now, if you’d like to center a website across all browsers there’s a few things that you’re going to need to do.
The HTML
First, in your HTML you need to create some <div> containers. Here’s all you need:
<body>
<div id=’container’>
Content
</div>
</body>
The CSS
Next, you need to write the CSS code to center your content:
body {
text-align: center;
}#container {
margin: 0px auto 0px auto;
text-align: left;
width: 80%;
}
There you go, that’s all you need to center a page using pure HTML and CSS.
How does it work?
The CSS file instructs the <body> tag to center the content using the text-align option. Then, it tells the <div> tag named container to do three things:
- Set the margins to nothing at the top and bottom but automatically find the right and left. In CSS this is represented by margin: top right bottom left.
- Next, realign the text to the left. Since we’re using Cascading Style Sheets the effect of the earlier text-align: center would otherwise affect our text.
- Finally, set the width of our page container to 80%.
Hey Chris
I’ve been wanting to do this for a long time…thanks for the tips. Sometimes CSS and me doesn;t really get along pretty well.
Hope I do get it right (or centralized) this time..
Yan
This is perfect, I was looking for info on how to do this for one of my sites. To tell you the truth, I give you a lot of credit to the code lovers, like you Chris, the whole thing gives me a headache, that is why my heart belongs to WYSIWYG’s.
All though I have to say that I have muddled through pretty well when I need to and taught myself a CSS and HTML trick or two, which is pretty cool!
Hey Chris any possibility you can do a tutorial on how to add a custom banner to the header of a WP blog? I know you have to create the banner but after that I am lost.
Thanks,
JR
margin: 0 auto; is easiest way to center ANY Div on a page into the center.
A ” Centered” website has become the standrard for most.. I prefer a liquid template.. such as mine :D
shame on me I don’t understand css yet, I just download and install free themes :) I think you should give an example for amateur like me :)
But I try to learn from now ..
Hello,
I sure hope this works I’ve looked around the web have found stuff that almost worked, but not perfect; You seem to speak in terms I can understand some of the other authors use terms that showed they know the computer but not people. I do NOT mean to put anyone down, when they are so much help. I REALLY do appreciate their & your advice.
I thank you and all the others that put information on the web.
Thank you again.
Sincerely,
Gary Arnott