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

Question

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

JS Fiddle is here .去掉 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 变得“像样”——无论您做什么，它都不会像现代浏览器那样漂亮。对我来说，这不值得头疼(一点也不值得)。