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;
}

Answer 2

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

希望这有帮助。

中心跨越段落

2 个答案: