Html 在IE7中垂直对齐多行文本

我正在尝试垂直对齐IE7中的文本，事实证明它是一个PITA，没有

display:table的css选项和
显示：表格单元格

它适用于类似于以下内容的导航：

<ul>
    <li><a href="#"><span>Text covers one line</span></a></li>
    <li><a href="#"><span>Text covers two lines, problem occurs</span></a></li>
</ul>

适用于较新的浏览器。我只需要一行文字就可以轻松地将文字居中，但当它变为两行文字时，我似乎无法使任何内容正常工作。
我知道这里有很多人讨厌表格（很多都是有道理的）。但您必须支持IE7作为一项要求-显然，我们不会在这里使用最新的技术

所以，如果你不能让它与有限的CSS一起工作，为什么不直接使用一个表呢？如果您必须支持浏览器，则会有妥协。说这句话让我很伤心：有时你不得不深呼吸，把一个标准扔出窗外，然后对自己说，“如果它有效，它就有效。”
我知道有两种解决方案，但每一种都有一些不适。请查看显示两者的

第一种解决方案基于此，其缺点是可单击区域仅压缩为文本，而不扩展到列表项边界。我认为这不是一个大问题，因为用户可能会单击文本而不是它旁边的文本

第二种解决方案基于此，其缺点是您需要在标记中添加一个额外的元素。我选择了一个
标记，但您可以使用任何其他内联元素。
如果我正确理解了您的任务，那么绝对没有必要使用表。这样做的主要原因是，如果有大量
li
元素超出了页面的宽度，那么要使它们很好地包装起来肯定会有问题

那么，这就是你想要达到的目标吗


解决方案基于：

简而言之，您必须为每个
li
元素设置以下规则：

li {
    display: inline-block;
    display: -moz-inline-box; /* Firefox < 3.5 */
    *display: inline; /* IE */
    zoom: 1;

    vertical-align: middle;
    margin-right: -.3em;
}

li{
显示：内联块；
显示：-moz内联框；/*Firefox<3.5*/
*显示：内联；/*IE*/
缩放：1；
垂直对齐：中间对齐；
右边距：-.3em；
}

但是，请注意，每个
内联块
元素后面都有一个额外的空格（这就是
margin left:-.3em
的作用。
你意识到你的跨距没有正确闭合吗？如果正确闭合跨距不能解决问题，你介意使用JavaScript吗？这是我能想到的唯一方法，在每个
上都没有一些黑客CSS类和一些后端逻辑来计算字母。这个问题可能会有所帮助-抱歉，跨距太小了po，在我的标记中没有中断。您发布的问题只适用于一行文本（将行高设置为与div相同的高度），但你可以想象当有两行文本时的结果…也是为了响应JS，我想我不介意使用它。我更喜欢它而不是大量多余的标记。是的，它很糟糕，感谢响应，它可能是唯一的非JS解决方案。
li {
    display: inline-block;
    display: -moz-inline-box; /* Firefox < 3.5 */
    *display: inline; /* IE */
    zoom: 1;

    vertical-align: middle;
    margin-right: -.3em;
}