center table

Forum Moderators: not2easy

Message Too Old, No Replies

center table

meanweaver

8:02 pm on Dec 20, 2004 (gmt 0)

I am trying to center a table using css, i can do what i want within the table cells but i seem to be having trouble getting the whole table centered, I have put the table inside a div called container like this <div id="container">
and my css is

div #container

{display: table; margin-left: auto; margin-right: auto;}

The table still sits on the left, can anyone show me where i am going wrong.

REgards Ian

createErrorMsg

8:49 pm on Dec 20, 2004 (gmt 0)

I believe all you need is a width on the table.

cEM

meanweaver

11:51 pm on Dec 20, 2004 (gmt 0)

I tried a width in the css but no luck, the table just seems to remain left aligned by default, I could use <div align="center"> each side of the table tags but would rather put it in the stylesheet if I can.

Regards

BeerBoyMcBeer

3:35 am on Dec 21, 2004 (gmt 0)

and my css is
div #container
{display: table; margin-left: auto; margin-right: auto;}

What's that "div" before the #container?

If it's actually in the .css file, that could mess it up. Take it out.

So (to recap) container should look like this:

#container
{display: table; margin-left: auto; margin-right: auto;}

Other than that, everything looks fine. Hope this helps.

createErrorMsg

3:45 am on Dec 21, 2004 (gmt 0)

Sorry meanweaver, I meant a width on the <div> that the table is in. Whatever element gets the margin:0 auto; needs to have an explicit width.

You can just apply those auto margins directly to the table, by the way, in order to center it. Note that you also need to use text-align center on the table's parent element (like your div, for instance) in order to center with IE5.x/Win. It doesn't support the auto margin thing.

One other note...

div #container

The space between div and #container tells the browser to apply these styles to an element with the id container that is inside of a div. Remove the space and it means the div WITH an id of container. A subtle difference that just might be to blame for your troubles.

cEM

meanweaver

5:56 pm on Dec 21, 2004 (gmt 0)

Still having problems with this, my style sheet now looks like this

#container
{ width:750; text-align:right; margin-left: auto; margin-right: auto;}

I aligned the text right just to check the div was working, I still have the table on the left of the browser, and not centered, the table is 750px wide, i have tried with and without the gap between div and # but still no luck. Cant see where i am going wrong now?

Thanks for all help so far.
Regards

webapp

6:13 pm on Dec 21, 2004 (gmt 0)

You need to add 'px' to the width:

width: 750px;

meanweaver

8:44 pm on Dec 21, 2004 (gmt 0)

I have added px for the width but the table is still left aligned. aargrgh

createErrorMsg

9:08 pm on Dec 21, 2004 (gmt 0)

meanweaver, any chance you could re-post the current code you are using? This would be both the HTML (div and table) and the corresponding CSS. Also, if this div/table combo is nested inside of another div, post the html and CSS for that, too.

Maybe we just need a fresh start to see what's going on.

cEM

pageoneresults

9:17 pm on Dec 21, 2004 (gmt 0)

Would adding

position:relative;

to the container address the issue?

On one site where I have a centered layout, the CSS looks like this...

div.content{position:relative;margin:0 auto;padding:0;background:#009;width:760px;/* bmh */voice-family:"\"}\"";voice-family:inherit;width:758px;}

SuzyUK

9:39 pm on Dec 21, 2004 (gmt 0)

What Doctype are you using, and what browsers are your checking this in?

margin: 0 auto; only works in IE Strict and other compatible browsers.

meanweaver

7:52 am on Dec 22, 2004 (gmt 0)

I am checking it in I.E. For the doctype I am using this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

I will post my complete stylesheet and html in case someone can spot where i am going wrong,
Here's my html

Here's my stylesheet

body {
background-color: #666666; align: center;
}

#container
{ width:750px; text-align:right; margin-left: auto; margin-right: auto;}

Regards
Ian

SuzyUK

7:59 am on Dec 22, 2004 (gmt 0)

ahh..Ian... there's a typo

body {
background-color: #666666; text-align: center;
}

meanweaver

11:24 pm on Dec 22, 2004 (gmt 0)

Hey guess what, my table is now centered, Thankyou very much for all help.

Regards
Ian

center table

meanweaver

createErrorMsg

meanweaver

BeerBoyMcBeer

createErrorMsg

meanweaver

webapp

meanweaver

createErrorMsg

pageoneresults

SuzyUK

meanweaver

SuzyUK

meanweaver

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week