段落中心跨度垂直

【问题标题】：center span in paragraph vertically段落中心跨度垂直
【发布时间】：2012-04-01 06:58:34
【问题描述】：

我有这样的事情：

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

显然，正如您在此处看到的，我的意图是使跨度在该段落内居中（水平和垂直）。文本水平居中就好了，但为什么垂直居中不起作用？这里有什么问题？

谢谢

【问题讨论】：

标签： css centering vertical-alignment

【解决方案1】：

http://jsfiddle.net/gxArp/

在p 上使用display:table;，在span 上使用display:table-cell;。

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

【讨论】：

【解决方案2】：

垂直对齐内联内容。它不是 HTML 属性 valign="middle" 的 CSS 等价物。这意味着它与之前和之后的元素相比垂直对齐，而不是参考父/子。这意味着该属性可以在一行内或一个 td 元素内对齐文本。请查看此链接http://phrogz.net/css/vertical-align/index.html了解如何实现垂直居中。

希望这会有所帮助。

【讨论】：