旋转文本的对齐方式

Question

我面临垂直旋转文字的问题。我已经查看了here和here，但仍然无法调整我的代码段以便正常工作。

我试图让垂直文本在中心对齐并且两个div的高度相等。

<div class="wrapper">
  <div class="vertical">
    <span class="vertical-text">short title</span>
  </div>
  <div class="horizontal">
     long text
  </div>
</div>

和当前的css：

.wrapper {
  display: inline-table;
}
.vertical {
  display: table-cell;
}
.vertical-text {
  display: inline-block;
  transform: rotate(-90deg);
  white-space: nowrap;
}
.horizontal { display: table-cell; }

这是Plunker的链接。

Answer 1

您可以在此行中添加.vertical css类：

vertical-align: middle;

它会垂直对齐你的文字。

所以你的课应该是这样的：

.vertical {
  display: table-cell;
  vertical-align: middle;
}