Question

标题几乎总结了它。我有以下代码：

<div class="container">
   <p>Hello world</p>
</div>

和CSS：

.container{
    width: 100%;
    height: 50px;    
    background-color: lightblue;
    vertical-align: middle; /* Why you no work!?!? */
}

但是文本没有在div中垂直对齐。我在这里显然缺少某些东西或者不理解某个概念。有谁告诉我发生了什么事？

谢谢！

Answer 1

如果您有单行文字，请将其添加到您的CSS中。

.container＆gt; p { 行高：50像素; }

Answer 2

要使用vertical-align: middle，您需要使用display: inline-block。

您的代码将更改为：

.container{
    display: inline-block; /* This is the line you need to introduce */
    width: 100%;
    height: 50px;    
    background-color: lightblue;
    vertical-align: middle;
}

您可以查看demo。

更新

对display: table使用.container，display: table-cell使用.container p可以使用。

Updated demo

.container{
    display: table;
    width: 100%;
    height: 200px;
    background-color: lightblue;
    vertical-align: middle;
}
.container p {
    display: table-cell;
    vertical-align: middle;
}

Answer 3

CSS中的垂直对齐并不像水平对齐那么简单。

根据您的情况和您需要应用一种或另一种技术的内容。

您可以查看此链接以了解不同的技术：

http://www.vanseodesign.com/css/vertical-centering/

简而言之，vertical-align：center;在你的情况下不会起作用

Answer 4

向容器中添加display属性，如下所示：

.container{
    width: 100%;
    height: 50px;    
    background-color: lightblue;
    display:inline-block; 
    vertical-align: middle; 
}

使用“vertical-align”使div中的文本居中不起作用

4 个答案:

更新