[SOLVED] HTML element TABLE failing to center in DIV despite CSS settings

Turbocapitalist · 04-23-2024, 02:45 AM

I am unable to place a table in the center of the page, on Firefox and Chromium. The other elements, such as P and IMG, center just fine. But the TABLE element stays stuck over on the left side of the page no matter what I have tried so far. Here is what I have at the moment.

Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test</title>
  <style type="text/css" media="screen">
        DIV   { text-align: center; background-color: #edd; }
        IMG   { border: thin solid #080; }
        TABLE { border: thin solid #080;  }
  </style>
</head>
<body>
  <div>
    <p>A Test</p>
    <img src="/graphic/sample.png" width="1000"
    height="400" alt="sample graphic" />
    <br />
    <table>
      <caption>alignment test</caption>
      <thead>
        <tr> <th>&nbsp;</th> <th>One</th> <th>Two</th> </tr>
      </thead>
      <tbody>
        <tr> <th>1</th> <td>aaa</td> <td>bbb</td> </tr>
        <tr> <th>2</th> <td>ccc</td> <td>ddd</td> </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

I would think that TABLE would behave like P and IMG within DIV in regards to its horizontal position. What have I missed?

Turbocapitalist · 04-23-2024, 04:19 AM

This has bugged me for a longer time but posting it here, even without an answer, has brought me to a work-around:

Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test</title>
  <style type="text/css" media="screen">
        DIV   { text-align: center; background-color: #edd; }
        IMG   { border: thin solid #080; }
        TABLE { border: thin solid #080; 
                margin-left: auto; margin-right: auto; }
  </style>
</head>
<body>
  <div>
    <p>A Test</p>
    <img src="/graphic/sample.png" width="1000"
    height="400" alt="sample graphic" />
    <br />
    <table>
      <caption>alignment test</caption>
      <thead>
        <tr> <th>&nbsp;</th> <th>One</th> <th>Two</th> </tr>
      </thead>
      <tbody>
        <tr> <th>1</th> <td>aaa</td> <td>bbb</td> </tr>
        <tr> <th>2</th> <td>ccc</td> <td>ddd</td> </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

The work-around seems to be to set margin-left: auto and margin-right: auto for some strange reason. I wonder why that is even necessary and how much of a bug it can be considered in both Firefox's and Chromium's rendering engines.

michaelk · 04-23-2024, 06:58 AM

It isn't a workaround, text align only applies to text not a table which is a block level element.

boughtonp · 04-23-2024, 07:33 AM

To have a table element obey its container's text-align, set it to "display:inline-table".

For a non-table element, use "display:inline-block" (assuming one needs to control width/etc), otherwise "display:inline" indicates a regular text-based/formatting element.

Otherwise, "margin:auto" is the easiest way to horizontally center non-inline elements, and is not a workaround but part of the CSS specification.
(For vertical margins, auto resolves to zero - use "margin:TOPBOTTOM auto" or "margin:TOP auto BOTTOM" if needed.)