centering and css

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
This is my first post, so I'll try to get right to the point.
I'm attempting my first site using css to make tables, but so far there's
one irritating glitch.
I'd like to have the tables centered but not the text inside the table.
Any help is very appreciated.


Re: centering and css

Mopar said:

Quoted text here. Click to load it

there are no tables there and there are so many issues with your
html/css i don't know where to start except again.

nice and easy:

<style type="text/css">
p{width:50%;margin:auto;border:1px solid green;}


the <p> will be 50% the width of the canvas area. the margins are 'auto'
which means they'll be of equal size, as the width of the <p> is 50% the
left and right margins will be 25% thus centering the <p>. the text is
left aligned which is [usually] the default. there is a nice green
border around the <p> so you can see it.

01/December/2003 05:24:28 pm kilo

Re: centering and css

Mopar wrote:

Quoted text here. Click to load it

table { margin: auto; }

Toby A Inkster BSc (Hons) ARCS
Contact Me -

Re: centering and css

Quoted text here. Click to load it

That's all good CSS except for internet explorer won't do it. You'll also
have to do something like, surround the table in a DIV with "text-align:
center" which will make ie center the contents in the window, and then add
"text-align: left" so that the text centering doesn't cascade down to the
text inside the table. There's other ways like adding a negative margin but
i think this is the simpelst best way.


Re: centering and css

Nick Howes said:

Quoted text here. Click to load it

yes it will

01/December/2003 06:33:36 pm kilo

Re: centering and css

brucie wrote:
Quoted text here. Click to load it

Am I correct in assuming that versions of IE that are earlier than IE6 would

Brian Tozer

Re: centering and css

Brian Tozer said:

Quoted text here. Click to load it
Quoted text here. Click to load it

it wouldn't surprise me. IE6 is over 2 years old - ancient. IE5 is
getting close to 5 years old - prehistoric.

02/December/2003 08:29:42 am kilo

Re: centering and css

Nick Howes wrote:
Quoted text here. Click to load it

All he has to do is remove the xml declaration. MSIE 6 for windows
expects to see the doctype declaration (which can trigger standards
compliant rendering mode) at the very first line of a document. Here,
the xml declaration creates a conflict; it's really an MSIE 6 bug.

"An XML declaration is not required in all XML documents; however XHTML
document authors are strongly encouraged to use XML declarations in all
their documents."

11.3 Table formatting by visual user agents
11.3.2 Horizontal and vertical alignment
Inheritance of alignment specifications
"The default alignment for cells depends on the user agent. However,
user agents should substitute the default attribute for the current
directionality (i.e., not just 'left' in all cases)."

If you insert the "direction:rtl;" css rule to the body or html tag,
you'll see that not only the text is formatted from right to left but
the horizontal alignment formating is right aligned as well.

W3C CSS level 1
4 Formatting model
4.1.2 Horizontal formatting
"(...) if both 'margin-left' and 'margin-right' are 'auto', they will be
set to equal values. This will center the element inside its parent."

W3C CSS level 2
10 Visual formatting model details
10.3.3 Block-level, non-replaced elements in normal flow
"If both 'margin-left' and 'margin-right' are 'auto', their computed
values are equal."

Interactive complete demo on table alignment (table, cell, text
direction, row, column, caption):

As others mentioned, if you want to format the horizontal alignment of
data inside cells, then use the CSS property text-align:[left|center|right]
E.g.: table


Site Timeline