회전 된 텍스트의 정렬

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