テキストセンターは水平でも変換時には垂直ではありません

Question

内部にテキストを入れた2つの矩形のdiv（幅は60px、高さは150px）を作成しました。テキストは長方形の中に縦に並んでいることを意味しているので、私はtransform: rotate(-90deg)を使ってテキストを縦に傾けました。

テキストを垂直にして、ボックスの中央に配置します。テキストを垂直に回転する前に、display: tableとvertical-align: middleメソッドを使用してテキストの中央に配置しました。これは、テキストが水平の場合には完全に機能します。しかし、コンテンツを回転させた後、テキストは中央に留まらない。 CSSはテキストを水平のように中央に配置します。

テキストを上端と左端からオフセットするために絶対/相対位置付けを試みましたが、display: tableとvertical-align: centerのプロパティを削除すると、テキストが消えます。

テーブルのプロパティを維持しながら、垂直に傾いたテキストをどのように配置するかに関するアイデアはありますか？どんな入力も非常に高く評価されます。

フィドル：https://jsfiddle.net/sxchx6zm/3/

HTML

<div id="both"> 
    <div class="rectangle"> 
     <div class="vertical">Text Area 1</div> 
    </div> 
    <div class="rectangle"> 
     <div class="vertical">Test Area 2</div> 
    </div> 
</div> 

CSS

.rectangle { 
    height: 150px; 
    width: 60px; 
    background-color: #d3d3d3; 
    border: 1px solid red; 
    display: table; 

} 

.vertical { 
    font-size: 16pt; 
    height: 150px; 
    max-width: 60px; 
    display: table-cell; 
    vertical-align: middle; 
    transform: rotate(-90deg); 
    white-space: nowrap; 
} 

Answer 1

https://jsfiddle.net/sxchx6zm/19/は、CSSのテーブルの使用を必要としないソリューションです： はここに更新されフィドルだ

.rectangle { 
 
    height: 150px; 
 
    width: 60px; 
 
    background-color: #d3d3d3; 
 
    border: 1px solid red; 
 
} 
 

 
.vertical { 
 
    text-align: center; 
 
    font-size: 14pt; 
 
    line-height: 150px; /* assumes text takes one line only */ 
 
    white-space: nowrap; 
 
    margin-left: -100%; /* centers so that the element overflows to the */ 
 
    margin-right: -100%; /* ... left and right of its parent equally */ 
 
    transform: rotate(-90deg); 
 
}

<div class="rectangle"> 
 
    <div class="vertical">Test Area 1</div> 
 
</div> 
 

 
<div class="rectangle"> 
 
    <div class="vertical">Test Area two</div> 
 
</div> 
 

 
<div class="rectangle"> 
 
    <div class="vertical">Test Area THREE</div> 
 
</div>

の

Answer 2

私がするのではなく、あなたが.verticalためwidthを設定することができれば、これを行う方法を見つけ出すことができましたmax-width。

あなたがいることを、あなただけの.verticalのためにあなたのCSSにこれを追加する必要がある場合 - あなたのCSSは、この可能text-align:center;

：あなたは両方の水平方向のテキストを中央揃えする必要が

.rectangle { 
    height: 150px; 
    width: 60px; 
    background-color: #d3d3d3; 
    border: 1px solid red; 
    display: table; 
} 

.vertical { 
    font-size: 16pt; 
    height: 150px; 
    width: 60px; //modified 
    display: table-cell; 
    vertical-align: middle; 
    transform: rotate(-90deg); 
    white-space: nowrap; 
    text-align : center; //added 
} 

注意垂直方向、したがってこの解決策。ここで