homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Center Div Tags
How to?

 6:10 pm on Mar 6, 2007 (gmt 0)

Hey everyone,

I have my content in div tags. Each div has a width of 800px. I need to center each div in the page. How is this possible? Whenever I add text-align: center; to the CSS body it just centers the text in the divs and not the actual divs themselves.

Does anyone know a work around for this?

Thanks in advance for your help!




 6:29 pm on Mar 6, 2007 (gmt 0)

This is quite easy to do. First, create your HTML:

<div id="container">

In this example, the div with the id of "container" is what we want to make centered and fixed width. Now for the CSS:

margin: 0;
padding: 0;
text-align: center;
margin: 0 auto;
width: 770px;
border: 1px solid red;

You could omit the margin and border on the body element if you wanted. Also, the border on the container is just to show where it is in this example. You would probably want to add text-align: left; to your container rules.


 6:38 pm on Mar 6, 2007 (gmt 0)

Thank you for your post. I'm actually using classes in my divs - <div class="content_box">

Should I be using ids?

Thanks again!


 1:39 pm on Mar 7, 2007 (gmt 0)

ID's are used where there will only be one instance on a page, for example a div called content.

Classes are used when there will more than one instance, for example <strong> tags which you might want to apply to more than one piece of text.


 1:42 pm on Mar 7, 2007 (gmt 0)

It's worth pointing out that you only have to use text-align:center if you still have to cater for IE5 - it's not required by the standards.


 1:49 pm on Mar 7, 2007 (gmt 0)

That makes sense. Well the main div's in my site which I am talking about here will only be used once.

It is fine to declare a style within a container for h1 tags and such right? For example, I am styling h2 tags in my right bar -

#right_bar h2 {
margin: 0px;
font-size: 11px;


 2:40 pm on Mar 7, 2007 (gmt 0)

That's a good example of where you'd use an id, yes.

(on a side note, IE won't resize fonts if you specify the size in pixels)


 2:46 pm on Mar 7, 2007 (gmt 0)

Really? The site displays fine in IE and FireFox. Would it be best to specify em's?


 11:37 pm on Mar 7, 2007 (gmt 0)

em's are more of a headache than a benefit. Use percentages.


 11:58 pm on Mar 7, 2007 (gmt 0)

For many users the font size you specify will be too small for them to read properly. Web browsers in general allow the user to resize to fonts to fit their particular needs. An unfortunate design decision on the part of the IE team though means that if you specify a font size in pixels users wonít be able to resize it if they adjust the text size. Therefore itís best to use ems or (as sgietz mentions) percentages to specify font sizes.


 1:58 pm on Mar 8, 2007 (gmt 0)

Well I switched all my sizes to em's. How are em's a headache? I can easily switch them to percentages.

Thanks again for your help! :)

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved