縦書き流体div内のテキストの整列

Question

divに縦書きのテキストをどのように整列させるのかと思います。

display: inline block;のようなものを試しましたが、役に立たなかったです。 私のコンテナは実際にはウィンドウ全体の高さの10％です。

以下のコードを参照してください。参照先divは "droite"です。

https://jsfiddle.net/5zh9qgnw/

.droite{ 
     width: 73%; 
     height: 100%; 
     float:right; 
     background-color: #232200; 
     text-align: center; 
     color: white; 
    } 

    .gauche{ 
     width: 27%; 
     text-align: center; 
     float: left; 
     background-color: #afafaf; 
    } 

    #aszone, #gzone{ 
     margin-left: 20px; 
     margin-right: 20px; 
     height: 10%; 
     text-align:center; 
     background-color: black; 
     background-size: cover; 
    } 

Answer 1

• 表示#gzone table-cell
として
• （オプションですが推奨）.gaucheと.droiteを含む#gzoneにtable-rowと表示された新しいdivを追加します
• table/table-row/table-cellを使用する場合、floatはテーブルレイアウト効果を削除するので、floatを使用しないでください。 https://jsfiddle.net/Lsyco9zv/

  今、あなたがする必要があるすべては、.gaucheのpaddingとwidthで再生すると、あなたが必要なものを得るために.droite：

はここでデモです。

Answer 2

https://jsfiddle.net/o9ouvqnx/

表のセルは、通常動作します。サイズを変更するにはスタイル 'gzone'を使用します。 table

表示.gaucheと.droiteとして

.gauche{ 
    width: 27%; 
    text-align: center; 
    display:table-cell; 
    background-color: #afafaf; 
} 

.droite{ 
    width: 73%; 
    height: 100%; 
    background-color: #232200; 
    text-align: center; 
    color: white; 
    display:table-cell; 
    vertical-align:middle; 
} 

.textg{ 
    display:table-cell; 
} 

Answer 3

セット親（gzone）display:table;と子（.gauche、.droite）display:table-cell;

.gzone{ display:table; } 
.gauche,.droite { display:table-cell; vertical-align:middle; }