对齐旋转文字

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