中心跨度垂直
问题描述:
我有这样的事情:中心跨度垂直
<p style="text-align:center;background-color:yellow;"><span style="vertical-align:middle;">My text goes here...</span></p>
很明显,你可以看到这里,我的意图是居中的那款内的跨度(水平和垂直)。文本水平居中很好,但为什么垂直居中不工作?这里有什么问题?
谢谢
答
上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;
}
答
垂直对齐内联对齐内容。它不是HTML属性valign =“middle”的CSS等价物。这意味着它与前后的元素相比是垂直对齐的,而不是参考父/子。这意味着这个属性可以对齐一行内或td元素内的文本。请查看此链接http://phrogz.net/css/vertical-align/index.html了解如何实现垂直居中。
希望这会有所帮助。