css - 如何结合 'writing-mode: sideways-lr' 水平和垂直居中文本？

Question

我有一个 TD/DIV，里面有一些文字。我使文本显示在 TD/DIV 的中心。但我希望文本使用 writing-mode: sideways-lr 居中.我怎样才能做到这一点？

div {
  width: 200px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
  border: solid;
  display: table-cell;
}

.side {
  writing-mode: sideways-lr;
}

<div>My text</div>
<br>
<div class="side">My text</div>

Code here

Answer 1

考虑一个额外的跨度，您可以在其中应用该属性并更好地使用 writing-mode: vertical-rl;transform: scale(-1);获得更好的支持(您的代码实际上仅适用于 Firefox)

div {
  width: 200px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
  border: solid;
  display: table-cell;
}

.side span {
  /* writing-mode: sideways-lr; */
  writing-mode: vertical-rl;
  transform: scale(-1);
}

<div>My text</div>
<br>
<div class="side"><span>My text</span></div>