CSS center

[diciccod]

just a quick question on basic css.

at http://reagan.dominicdicicco.com i would like the text box below the image to be centered. It is in the same ID as the image which has text-align: center; in it. The image and text both center in IE but only the image centers in firefox. It would be appreciated if anyone could give some insight on this. Thanks!

EDIT: also when i take away the class from the <p> tag it centers in firefox. I don't understand this because the class has nothing in it about alignment.

[Trico]

p.textbox {
background-color: #FF9;
width: 200px;
border-color: #630;
border-style: solid;
margin: 0 auto; /* Add this line */
}

[diciccod]

Awesome. Worked perfect.

But why is that, why does firefox require "margin: 0 auto;" and why does that allow it to be centered?

[Trico]

Well as the attribute name implies, text-align is for aligning text within other block elements not the actual block element itself. The reason this still occurs is down to the poor interpretation of CSS on behalf of browser makers I.E. Microsoft/Netscape etc.

Margin: 0 auto; applys both a top and bottom margin of 0 and an equal value for both the left and right sides... flushing everything into the centre of the page.