html - 旋转文字的对齐

我面临着垂直旋转文本的问题。我已经看过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的链接。

最佳答案

您可以将以下行添加到.vertical css类中：

vertical-align: middle;

它将使您的文本垂直对齐。



所以您的课程应该是这样的：

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

关于html - 旋转文字的对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37689389/