Quick Firefox CSS question

[boscomilo]

I want to centre a table within a div, which works okay in IE with

table {
display: block;
margin: auto;
}

But in Firefox it aligns on the left. Any ideas?

[Ryan Fait]

You sure it's not the other way around? IE doesn't handle margin: 0 auto; very well and Firefox does. Unless I'm missing some very important information that I need to know!

[ukgeoff]

I am curious as to why you feel the need to be specifying; display: block; in your table styling.

[boscomilo]

Yes, the problem is with Firefox and not IE.

The reason I have display: block in my table styling is because I'm still something of a novice with CSS and it was suggested as a way of centering by someone else here.

Basically, I have a table of information which I need to sit centrally within a div. is there a standard way of doing this with CSS?

[moojoo]

margin:0 auto?

[Ryan Fait]

Are you talking about horizontally centered, or both horizontally and vertically centered?

[moojoo]

vertically centered is trickier but doable.

Example Here of Vert/Horiz centering with CSS

[ukgeoff]

Your best cross browser solution would be to style the div with;

Code: Select all

text-align: center;

As this is inherited, you will need to change the text-align back at the table level for whatever you want it to be, probably;

Code: Select all

text-align: left;

[masonbarge]

If "margin: 0 auto;" doesn't center the table in Firefox, you should check your code -- you've made an error somewhere.

[Ryan Fait]

It'd really be helpful to see this in action.

[boscomilo]

Cracked it.

The display:block was unnecessary and margin: 0 auto on its own works.

Many thanks for your help.