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

【问题标题】：How do I horizontally align vertical text in a table with CSS?如何使用 CSS 水平对齐表格中的垂直文本？
【发布时间】：2021-11-08 06:55:36
【问题描述】：

我在表格单元格中有一些 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;
}

【问题讨论】：

我认为display: flex; justify-content: center; 应该这样做
顺便说一句，它在 Chrome 上运行良好
stackoverflow.com/questions/732139/…，注意center不是vertical-align的有效值，应该是middle。
@arieljuod 哎呀，是的，在示例中应该是垂直对齐：中间。
@TemaniAfif 这是否意味着这是 Firefox 中的错误？

标签： css text-alignment tablecell vertical-text

【解决方案1】：

This 应该可以工作。

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>

【讨论】：

【解决方案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>

【讨论】：

我接受了这种添加额外的解决方案，因为我知道这是一种 hacky 解决方法。它还可以解决一个不同但相关的 Chrome 错误，因此也可以加分。