Centering Content with CSS

Question

I have an HTML page that is vertically divided up into 3 sections. The background of the top section is white. The background of the middle section is gray. And the bottom section is black. I want these background colors to stretch the entire width of the page, regardless of the user's screen resolution. I have this working.

I have some content that is 800px in width. I want this content horizontally centered in each of these sections. Unfortunately, I can't seem to get it to work. What am I doing wrong? Here is my code:

<div style="background-color:white;">
    <div style="text-align:center;">
       Welcome!
    </div>
</div>

<div style="background-color:silver;">
    <div style="text-align:center;">
       Navigation
    </div>
</div>

<div style="background-color:black;">
    <div style="text-align:center;">
      Some Text
    </div>
</div>

what browser isn't centering the text? works fine in my FF and safari. — Derek Downey, Dec 23 '10 at 14:49
possible duplicate of [Center contents of webpage](http://stackoverflow.com/questions/882344/center-contents-of-webpage) — Stephen, Dec 23 '10 at 14:51
This text IS centered as you decribe. What is the content that is '800px wide'. If this is a div or other block level element then you'll need to use "margin: 0 auto;" instead of text align. Oh, and seperate your style and content — calumbrodie, Dec 23 '10 at 14:53

score 3 · Accepted Answer · answered Dec 23 '10 at 14:52

text-align:center simply makes the text center justified rather than left or right justified.

What you want to do is setup a class on each of those divs:

.container {
margin:0 auto;
width:800px
}

margin: 0 auto will make the 800px wide box centered in the screen.

Centering Content with CSS

1 Answers1