这是在块元素中垂直对齐文本的最简单,最灵活的解决方案吗？

Question

我可能是第一个发现这个的人(或者至少在网上记录它):

HTML:

<div>Vertically Aligned Text<span></span></div>

CSS:

div
{
    height: 100px; /* or whatever % etc. */
}

div > span
{
    display: inline-block;
    visibility: hidden;
    height: 100%;
    vertical-align: middle;
}

它的工作原理,因为代码增加的line-height其容器的100%,但我不明白为什么设置vertical-align: middle;上<span></span>影响文本.

我没有在网上找到这个解决方案,它比我找到的其他解决方案更简单,更灵活.此外,它应该适用于从IE6开始的所有浏览器(显然用其他东西替换子选择器).

为了满足问题要求,对于一个古老的问题,这是最简单,最灵活的解决方案吗？

Answer 1

我发现使用 CSS 显示属性table-cell是最简单的方法。

看这个jsFiddle

还有CSS：

div
{
    height:100px; /* or whatever % etc. */
    border: solid 1px black;
    vertical-align : middle; 
    display : table-cell;
}