How to locate the text of table header at center in CSS3?

Question

How can I locate the text of HTML5 table header at center in CSS3?

If I write text-align: center; , it works on td , but not on th . However, some web pages say that you can use text-align: center; on both td and th . But, there are also some sites that don't use text-align: center; on th , but nonetheless place it at center (and I don't know why).

So why does the text-align: center; not work on th ? And how can I locate it at center?

Answer 1

Works for me here! http://jsfiddle.net/vuXL3/

Just applied text-align: center; to the th .

Answer 2

It looks like the following code caused all the messes:

.blog {
    text-align: left;
}

and within <div class=blog>...</div> are my tables, which would be affected by the above setting.

That said, I don't know why then only th was affected, and td was NOT, by the above setting. Also, if I write the following code:

table th, td {
    text-align: center;
}

the text location succeeded. However,

th, td {
    text-align: center;
}

doesn't work on th , but work on td for some reasons.

I don't know why such inconsistency occurs, but for the time being, I had both th and td located at center. Thanks for those who left comments.