css - 如何使用 CSS 水平对齐表格中的垂直文本？

Question

我writing-mode: vertical-rl在表格单元格中有一些文本。默认情况下，它被推到单元格的左侧，但我想将它居中或向右推。如果我正在处理horizontal-tb文本，我会使用text-align: centerorvertical-align但似乎没有相应的horizontal-align属性。

在此示例中，我希望垂直文本在单元格中居中：

我正在 Firefox 91 中对此进行测试。

这是上图的 jsfiddle：https ://jsfiddle.net/a965ej2x/

以及对应的代码：

<table>
<tbody>
  <tr>
    <th>This is my heading</th>
  </tr>
  <td>
    しょうがない
  </td>
</tbody>
</table>

CSS：

td {
  writing-mode: vertical-rl;
  text-align: center;
  vertical-align: middle;
}
td, th {
  border: 1px solid black;
}

Answer 1

这似乎是 Firefox 上的一个错误，您可以通过在应用writing-mode

td {
  text-align: center;
}

td span {
  writing-mode: vertical-rl;
  vertical-align:top; /* remove bottom whitespace */
}

td,
th {
  border: 1px solid black;
}

<table>
  <tbody>
    <tr>
      <th>This is my heading</th>
    </tr>
    <td>
      <span>しょうがない</span>
    </td>
  </tbody>
</table>

Answer 2

这应该有效。

td {
  display: flex;
  box-sizing: border-box;
  writing-mode: vertical-rl;
  width: 200px;
  border: 1px solid black;
  line-height: normal;
  align-items: center;
  cursor: text;
}

<table border="1">
        <tbody>
          <tr>
            <th>This is my heading</th>
          </tr>
          <td>
            しょうがない
          </td>
        </tbody>
        </table>