Ausrichtung des gedrehten Textes

Question

Ich stehe vor dem Problem, Text vertikal zu drehen. Ich habe bereits here und here angesehen, aber konnte mein Schnipsel noch nicht richtig arbeiten.

Ich versuche, vertikalen Text in der Mitte und gleiche Höhen für beide divs auszurichten.

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

und aktuelle CSS:

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

Hier ist der Link zu einer Plunker.

Answer 1

Sie können diese Zeile .vertical CSS-Klasse hinzufügen:

vertical-align: middle; 

es Sie vertikal Text auszurichten.

---

So sollte Ihre Klasse wie folgt sein:

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