0

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

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

和 CSS：

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

But the text is not vertically aligning in the div. I'm clearly missing something here or don't understand a certain concept. Anybody tell me what's happening?

Thanks!

4

4 回答 4

2

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

.container > p{ line-height:50px; }

于 2013-04-15T12:26:39.500 回答
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;
}

你可以看一下演示。

更新

使用display: tablefor.container和display: table-cellfor.container p使其工作。

更新的演示

.container{
    display: table;
    width: 100%;
    height: 200px;
    background-color: lightblue;
    vertical-align: middle;
}
.container p {
    display: table-cell;
    vertical-align: middle;
}
于 2013-04-15T12:33:32.480 回答
1

将 display 属性添加到您的容器中，如下所示：

.container{
    width: 100%;
    height: 50px;    
    background-color: lightblue;
    display:inline-block; 
    vertical-align: middle; 
}
于 2013-04-15T12:32:35.753 回答
1

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

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

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

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

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

于 2013-04-15T12:30:13.900 回答