中心跨度垂直

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/

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

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

Answer 2

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

希望这会有所帮助。