15 replies [Last post]
HymanRoth
HymanRoth's picture
Offline
Regular
Last seen: 14 years 25 weeks ago
Joined: 2006-02-17
Posts: 22
Points: 0

How do you horizontally centre a table within its containing block? There appears to be no equivalent of the css text-align property for specifying how block-level items are positioned on the page.

Setting {text-align: center} works for IE but not for FF.

Thanks

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Centering tables...

For centreing blocks, use margin: 0 auto (auto left & right).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

HymanRoth
HymanRoth's picture
Offline
Regular
Last seen: 14 years 25 weeks ago
Joined: 2006-02-17
Posts: 22
Points: 0

Centering tables...

It's ok, I worked it out: setting the left and right margins to auto centres the table. I don't think the solution is particularly intuitive, though.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 21 weeks 18 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Centering tables...

What do you mean, not intuitive?

Verschwindende wrote:
  • CSS doesn't make pies

Anonymous
Anonymous's picture
Guru

Centering tables...

thepineapplehead wrote:
What do you mean, not intuitive?
That means he thinks his way should work and everyone else be buggered. Laughing out loud

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Centering tables...

HymanRoth wrote:
I don't think the solution is particularly intuitive, though.

I don't think CorelDraw is particularly intuitive but it's still up to version 12 (or something).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

HymanRoth
HymanRoth's picture
Offline
Regular
Last seen: 14 years 25 weeks ago
Joined: 2006-02-17
Posts: 22
Points: 0

Centering tables...

Sorry Tyssen, didn't see your original reply.

By not intuitive I mean that I spent a lot of time on w3.org searching for "centering blocks". Even when I found the answer, it didn't include the word "center "in it. "Text-align: center" is inutuitive, whereas 'margin-left and margin-right: auto' , in my very humble newbie opinion, is not.

While I'm at it, here's another question: what's the best way to do rounded borders, for example as part of a tabbed navigation system?

Thanks

Anonymous
Anonymous's picture
Guru

Centering tables...

HymanRoth wrote:
"Text-align: center" is inutuitive
text-align is for inline items. What's so intuitive about misusing it and expecting it to work on block level items? Just wondering. Smile
HymanRoth wrote:
While I'm at it, here's another question: what's the best way to do rounded borders, for example as part of a tabbed navigation system?
The one I use: http://www.alistapart.com/articles/customcorners/ Of course that shows on google, the search feature at alistapart and the search feature here. Smile

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 21 weeks 18 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Centering tables...

Let's see . . . .I want to center a table . . . Ooooh! Text-align! That sounds exactly what I need.

Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

HymanRoth
HymanRoth's picture
Offline
Regular
Last seen: 14 years 25 weeks ago
Joined: 2006-02-17
Posts: 22
Points: 0

Centering tables...

Triumph wrote:
HymanRoth wrote:
"Text-align: center" is inutuitive
text-align is for inline items. What's so intuitive about misusing it and expecting it to work on block level items? Just wondering. Smile
HymanRoth wrote:
While I'm at it, here's another question: what's the best way to do rounded borders, for example as part of a tabbed navigation system?
The one I use: http://www.alistapart.com/articles/customcorners/ Of course that shows on google, the search feature at alistapart and the search feature here. Smile

While I'm grateful for the link you provided, I don't think there's any need to get sarky. I only tried "text-align: center" to see what would happen - and I was surprised to see that IE put the table in the centre on the back of this.

My point regarding the solution not being very intuitive is inherently subjective, as all opinions are. If you read some css that says "text-align:center" then it's not too hard to work out what the horizontal alignment is going to be. I don't think that's the case with margin-left/right: auto. That's all I was trying to say.

If I gave the impression I was upset because "text-align" doesn't work on tables, then that is my mistake. Although I would point out that whilst newbies are expected to be dumb, I would hope that we're not that dumb.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 21 weeks 18 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Centering tables...

You're not dumb by any means, and we don't expect you to be dumb. You are right though, that margin: 0 auto; does not seem very helpful - you'd think they'd have created a tag called something like horizontal-align: center; or block-align: center; - you;re right, it would make much more sense.

As for IE supporting the text-align; well, you'll have to learn that IE is crap, and doesn't do anythign properly. This is why it is suggested you code for Firefox, which does things properly.

Verschwindende wrote:
  • CSS doesn't make pies

Anonymous
Anonymous's picture
Guru

Centering tables...

What does "sarky" mean? :?

You should go read all of my other posts and notice that I don't explain anything. I'll hint and nudge but I do not spoon feed. If you take my succinctness to be "sarky" then I'll just shrug and have a laugh.

I never said you were dumb. You may be sarky but I'm not sure yet. Laughing out loud (Oh, yeah, I'm also sarcastic. Tongue)

HymanRoth
HymanRoth's picture
Offline
Regular
Last seen: 14 years 25 weeks ago
Joined: 2006-02-17
Posts: 22
Points: 0

Centering tables...

I do appreciate the help I've received here. I also realize that people asking questions out of sheer laziness can be very frustrating.

In the past two weeks I have started to learn HTML, CSS, Apache, Php and MySQL. The learning curve is pretty steep. I've solved 95% of issues myself, and I agree that it's a lot more satisfying if you do solve things for yourself.

For some reason, when I hit problems in CSS I frequently can't find the answer in the various books and online help resources I have. CSS is very powerful but also annoyingly quirky. I made a point of studying the block and inline box models in some detail and yet I still don't think I fully understand them.

That is why I find I this site so helpful, and why I am grateful for the help I've been given.

Anonymous
Anonymous's picture
Guru

Centering tables...

HymanRoth wrote:
... I agree that it's a lot more satisfying if you do solve things for yourself ...
Ah, I'm so glad you feel that way, it makes me much more happy to help. Smile

HymanRoth
HymanRoth's picture
Offline
Regular
Last seen: 14 years 25 weeks ago
Joined: 2006-02-17
Posts: 22
Points: 0

Centering tables...

Triumph wrote:
HymanRoth wrote:
... I agree that it's a lot more satisfying if you do solve things for yourself ...
Ah, I'm so glad you feel that way, it makes me much more happy to help. Smile

I bashed my head against the wall for two days on the box-in-a-box problem before posting here. I was convinced the answer was setting the width correctly until you showed me the very simple solution.

Sometimes you just need a fresh viewpoint.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Centering tables...

HymanRoth wrote:
In the past two weeks I have started to learn HTML, CSS, Apache, Php and MySQL. The learning curve is pretty steep.

I'll say. I'd go a bit easier on yourself and cut back a bit. Wink

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference