如何在不使用CSS'table-cell'属性的情况下在IE7中垂直对齐文本？

Question

我有固定的高度div,其中包含文本.我希望文本在div的中间垂直对齐,但问题在于一些文本是单行的,有些文本分成两行.对于IE8,Chrome和Firefox,使用display: table-cell并vertical-align: middle提供我需要的解决方案:

JS Fiddle就在这里.width: 300px当文本在一行时,从星号上取下星号以查看格式.

但是,IE7不支持该display: table-cell属性.我发现的唯一解决方案仅适用于单行,而不适用于可能是1行或2行的文本.如何在IE7中显示它,就像在更现代的浏览器中一样,而不使用任何脚本？

Answer 1

将 IE7 CSS 调用放在position:relative、div和absolute上，并保留现代浏览器h6的代码怎么样？vertical-align

http://jsfiddle.net/yap59cn3/

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

ie7.css

div
{
    /* Use inheritance, and override only the declarations needed. */
    position:relative;
}

h6
{
    height:auto; /* override inherited css */
    position:absolute;
    top:45%;
}

我们的目标是让 IE7“美观”——无论你做什么，它永远不会像现代浏览器那样漂亮。对我来说，这不值得让人头疼（甚至一点也不值得）。