對齊旋轉文字

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