垂直對齊文本在流體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
• 顯示.gauche和.droite作爲table-cell
• （可選但推薦）在#gzone中添加一個顯示爲table-row的新div，以包含.gauche和.droite
• 如果您打算使用表格/表格行/表格單元格，則不要使用float，因爲float會刪除表格佈局效果。

這裏有一個演示：https://jsfiddle.net/Lsyco9zv/

現在，所有你需要做的，玩的.gauche的padding和width和.droite得到你所需要的。

Answer 2

https://jsfiddle.net/o9ouvqnx/

表細胞通常工作。樣式'gzone'調整/浮動表或常規表css。

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