水平表对齐不起作用

Question

假设我有一些像这样的代码......

table {
  text-align: center;
}

<table>
  <tbody>
    <tr>
      <td>Text</td>
    </tr>
    <tr>
      <td>Text</td>
    </tr>
    <tr>
      <td>Text</td>
    </tr>
  </tbody>
</table>

正如您所看到的，文本目前还没有居中。但是，当我添加此代码时，它是居中的。

td {
  width: 1000px;
}

任何人都可以解释为什么会这样做吗？

此外，我不希望我的代码具有指定的height和width s（以像素为单位），因此任何人都可以解释如何水平对齐文本而不包括指定的宽度和高度？

Answer 1

table {
  text-align: center;
  border: 2px solid blue;
}

<table onclick="this.style.width = '100%'">
  <tbody>
    <tr>
      <td>Text</td>
    </tr>
    <tr>
      <td>Text</td>
    </tr>
    <tr>
      <td>Text</td>
    </tr>
  </tbody>
</table>

这可能会帮助您查看文本确实居中，但表格未扩展到屏幕。点击该表会将width设置为100%，并会产生您的预期输出。

Answer 2

您的代码没有居中，因为您的td没有指定的高度，当您这样做时，您会发现代码正常工作。如果td宽度为1000px，则会使您的文字向下500px向下移动。

要回答问题的第二部分，可以通过以下两种方法解决问题。

1

table {
  text-align: center;
  margin: auto;
}

<table>
  <tbody>
    <tr>
      <td>Text</td>
    </tr>
    <tr>
      <td>Text</td>
    </tr>
    <tr>
      <td>Text</td>
    </tr>
  </tbody>
</table>

2

table {
  text-align: center;
  width: 100%;
}

<table>
  <tbody>
    <tr>
      <td>Text</td>
    </tr>
    <tr>
      <td>Text</td>
    </tr>
    <tr>
      <td>Text</td>
    </tr>
  </tbody>
</table>