I have a table contained inside of a div. I have a class associated w/ the div that includes text-align: center. Shouldn't this property inherit into the table, centering it? When I try this using Netscape, it does not work, but IE is fine with it. I am trying to use CSS to replace the use of <table align=center>. Can anyone tell me what I am doing wrong?text-align: center; in the <div>, and style="margin: 0 auto;" in the table should do it -- like so
<div style="text-align: center;">
<table style="width: 500px; height: 500px; margin: 0 auto;" border="1">
<tr>
<td>Hi there.</td>
<td> Hi there... again.</td>
</tr>
<tr>
<td>Hi there... again... again.</td>
<td>Hi there... again... again... again.</td>
</tr>
</table>
</div>Thanks -- just what I was looking for. Do you mind explaining why what you did worked?The text-align: center; in the container <div> will center everything that is inside it. That alone will work just fine in IE 6; but to get it working in any other browser, you must add margin: 0 auto; to child element; which sets the right and left margins to take up, equally, the space left over after the width of the child element is taken into consideration.
So, since the parent <div> has no width set, it automatically takes up all available space, and the text-align: center; centers the table within it. The table's width is set to 500px, so the auto left and right margins are the entire width of the <div>, which is as wide as the page (since there's no width set), minus 500px (width of the table), divided by two.
I hope I explained that well enough; I'm not really good at 'splainin' things.
For a bit more info (and probably more comprehensible), you can check out this W3C link (<!-- m --><a class="postlink" href="http://www.w3.org/Style/Examples/007/center.html">http://www.w3.org/Style/Examples/007/center.html</a><!-- m -->), and this google search (<!-- m --><a class="postlink" href="http://www.google.com/search?q=Centering+in+CSS&sourceid=mozilla-search&start=0&start=0&ie=utf-8&oe=utf-8">http://www.google.com/search?q=Centerin ... 8&oe=utf-8</a><!-- m -->).It might be good to mention that text-align: center is supposed to center inline elements only (text, <b>, <i>, <span>...). The fact that text-align: center; in the div tag centers the table in Internet Explorer is a bug in Internet Explorer. To center a block-level element, like a DIV, TABLE, P or UL, set the left and right margins to auto. This is according to the standards
Originally posted by toicontien
It might be good to mention that text-align: center is supposed to center inline elements only (text, <b>, <i>, <span>...). The fact that text-align: center; in the div tag centers the table in Internet Explorer is a bug in Internet Explorer. To center a block-level element, like a DIV, TABLE, P or UL, set the left and right margins to auto. This is according to the standards
Aha! There we go: a nice, short, simple, comprehensible explanation.
I need some heavy reading on how things do things, and why they do those particular things.Thanks to both of you... your feedback is very helpful and will now make me remember that tex-align: center can (should) only be used on inline elements.
<div style="text-align: center;">
<table style="width: 500px; height: 500px; margin: 0 auto;" border="1">
<tr>
<td>Hi there.</td>
<td> Hi there... again.</td>
</tr>
<tr>
<td>Hi there... again... again.</td>
<td>Hi there... again... again... again.</td>
</tr>
</table>
</div>Thanks -- just what I was looking for. Do you mind explaining why what you did worked?The text-align: center; in the container <div> will center everything that is inside it. That alone will work just fine in IE 6; but to get it working in any other browser, you must add margin: 0 auto; to child element; which sets the right and left margins to take up, equally, the space left over after the width of the child element is taken into consideration.
So, since the parent <div> has no width set, it automatically takes up all available space, and the text-align: center; centers the table within it. The table's width is set to 500px, so the auto left and right margins are the entire width of the <div>, which is as wide as the page (since there's no width set), minus 500px (width of the table), divided by two.
I hope I explained that well enough; I'm not really good at 'splainin' things.
For a bit more info (and probably more comprehensible), you can check out this W3C link (<!-- m --><a class="postlink" href="http://www.w3.org/Style/Examples/007/center.html">http://www.w3.org/Style/Examples/007/center.html</a><!-- m -->), and this google search (<!-- m --><a class="postlink" href="http://www.google.com/search?q=Centering+in+CSS&sourceid=mozilla-search&start=0&start=0&ie=utf-8&oe=utf-8">http://www.google.com/search?q=Centerin ... 8&oe=utf-8</a><!-- m -->).It might be good to mention that text-align: center is supposed to center inline elements only (text, <b>, <i>, <span>...). The fact that text-align: center; in the div tag centers the table in Internet Explorer is a bug in Internet Explorer. To center a block-level element, like a DIV, TABLE, P or UL, set the left and right margins to auto. This is according to the standards
Originally posted by toicontien It might be good to mention that text-align: center is supposed to center inline elements only (text, <b>, <i>, <span>...). The fact that text-align: center; in the div tag centers the table in Internet Explorer is a bug in Internet Explorer. To center a block-level element, like a DIV, TABLE, P or UL, set the left and right margins to auto. This is according to the standards
Aha! There we go: a nice, short, simple, comprehensible explanation.
I need some heavy reading on how things do things, and why they do those particular things.
Thanks to both of you... your feedback is very helpful and will now make me remember that tex-align: center can (should) only be used on inline elements.