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

Question

I have some writing-mode: vertical-rl text in a table cell. By default, it gets pushed to the left side of the cell, but I want to center it or push it right. If I were handling horizontal-tb text, I would use text-align: center or vertical-align but there doesn't seem to be a corresponding horizontal-align property.

In this example, I want the vertical text centered in the cell:

I am testing this in Firefox 91.

Here is a jsfiddle for the above image: https://jsfiddle.net/a965ej2x/

And the corresponding code:

<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;
}

I think `display: flex; justify-content: center;` should do it — ShamPooSham, Sep 12 '21 at 20:35
https://stackoverflow.com/questions/732139/vertical-align-middle-does-not-align-to-the-middle-in-firefox, note that `center` is not a valid value for `vertical-align`, it should be `middle`. — arieljuod, Sep 12 '21 at 20:51
@arieljuod Whoops, yes, should be vertical-align: middle in the example. — erjiang, Sep 13 '21 at 00:11
@ShamPooSham setting `display: flex` on the causes the table cell to no longer stretch to the size of the column. — erjiang, Sep 13 '21 at 00:17

score 1 · Accepted Answer · answered Sep 13 '21 at 00:17

1

It seems to be a bug on Firefox that you can fix by adding an extra element where you apply the 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>

answered Sep 13 '21 at 00:17

Temani Afif

245,468
26
309
415

I'm accepting this solution of adding an additional knowing that it's kind of a hacky workaround. It also works around a different but related Chrome bug, so bonus points for that too. – erjiang Sep 13 '21 at 00:57

score 0 · Answer 2 · answered Sep 12 '21 at 20:45

This should work.

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>

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

2 Answers2