垂直對齊流體div中的文本

Question

我想知道如何在div中對齊verticaly我的文本。

我嘗試過像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

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 2

set parent（gzone） display:table; 和孩子（.gauche，.droite） display:table-cell;

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

Answer 3

• 將#gzone顯示為table
• 將.gauche和.droite顯示為table-cell
• （可選但建議）在#gzone中添加一個顯示為table-row的新div，以包含.gauche和.droite
• 如果你要使用table / table-row / table-cell，那么不要使用float ，因為float會刪除表格布局效果。

這是一個演示： https ： //jsfiddle.net/Lsyco9zv/

現在，你需要做的就是使用.gauche和.droite的padding和width來獲得你需要的東西。