書込みモードで垂直に真ん中に設定

Question

私はdivでテキストを持ち、writing-mode: vertical-rlです。今度はこのテキストを中間にしたいが、vertical-align: middle;はline-heightと設定しても動作しない。

.a{ 
 
     background-color: coral; 
 
     writing-mode: vertical-lr; 
 
     min-height: 10em; 
 
     vertical-align: middle; 
 
     line-height: 2em; 
 
    }

<div class="a">hiiiii<div>

私はこれをどのように行うことができますか？

Answer 1

使用CSS3フレキシボックス概念、あなたのスタイルシートに以下のコードを追加し、それが

display:flex; 
    justify-content:center; 
    align-items:center; 

正常に動作しますI下のスニペットを追加しました。

.a{ 
 
     display:flex; 
 
     justify-content:center; 
 
     align-items:center; 
 
     background-color: coral; 
 
     writing-mode: vertical-lr; 
 
     min-height: 10em; 
 
     line-height: 2em; 
 
    }

<div class="a">hiiiii<div>

Answer 2

このようフレキシボックスを使用してみてください、

.a{ 
 
     display:flex; 
 
     background-color: coral; 
 
     writing-mode: vertical-lr; 
 
     min-height: 10em; 
 
     vertical-align: middle; 
 
     line-height: 2em; 
 
     justify-content:center; 
 
     width:2em; 
 
    }

<div class="a">hiiiii<div>