如何水平对齐 table 和 CSS 中的垂直文本？

Question

我在 table 单元格中有一些 writing-mode: vertical-rl 文本。默认情况下，它被推到单元格的左侧，但我想将它居中或推到右侧。如果我正在处理 horizontal-tb 文本，我会使用 text-align: center 或 vertical-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

应该可以。

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>

Answer 2

这似乎是 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>

如何水平对齐 table 和 CSS 中的垂直文本？

How do I horizontally align vertical text in a table with CSS?

css

vertical-text

text-alignment

tablecell