垂直对齐文本在流体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; }