css - 垂直居中段落

Question

我有这样的东西:

<p style="text-align:center;background-color:yellow;"><span style="vertical-align:middle;">My text goes here...</span></p>

显然，正如您在此处看到的，我的意图是将跨度居中放置在该段落内(水平和垂直)。文本水平居中很好，但为什么垂直居中不起作用？这里有什么问题吗？

谢谢

Answer 1

http://jsfiddle.net/gxArp/

使用 display:table;在 p和 display:table-cell;在 span .

p{
    text-align:center;
    background-color:yellow;
    height:50px;
    width:100%;
    display:table;
}
span{
    display: table-cell;
    vertical-align: middle;
}