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

它的工作原理是因为代码将行高增加到其容器的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;
}

Answer 2

本文介绍了所有垂直对齐技术（我知道:)），包括您采用的方法。 http://phrogz.net/css/vertical-align/index.html

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

2 个答案: