html - CSS calc() 不能使 td 元素居中

Question

我想创建一个表格，第二列（由单个单元格表示）放在页面的中心。我正在尝试使用 calc() 函数来做到这一点，但是它不起作用。这是我的代码：

.bio {
  text-align: center;
  margin: 0 auto;
  width: calc(100% - 200px);
}

img {
  height: 200px;
}

<table cellspacing="20">
  <tr>
    <td>
      <img src="https://placehold.it/200x200" alt="image of me">
    </td>
    <td class="bio">
      <h1>Heading</h1>
      <p>Some text</p>
    </td>
  </tr>
</table>

我的代码有什么问题？

标签： htmlcsscss-calc

Answer 1

table {
  display: flex;
  justify-content: center;
  text-align: center;
}

img {
  height: 200px;
  position: absolute;
  left: 0;
  top: 0;
}

<table cellspacing="20">
  <tr>
    <td>
      <img src="https://placehold.it/200x200" alt="image of me">
    </td>
    <td class="bio">
      <h1>Heading</h1>
      <p>Some text</p>
    </td>
  </tr>
</table>