Question

我想知道如何将div中的文本对齐。

我已尝试display: inline block;之类的内容，但它没有帮助。我的容器实际上是整个窗口高度的10％。

请参阅下面的代码，推荐div是＆＃34; droite＆＃34;。

.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

设置父（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来获取您需要的内容。

垂直对齐流体div中的文本

3 个答案: