Question

我试图在IE7中垂直对齐文本，证明是没有display: table;和display: table-cell;

的css选项的PITA

导航看起来与此类似：

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

CSS：

ul li a{ display: table; zoom: 1; width: 240px; height: 30px;}
ul li a span{ width: 200px; display: table-cell; zoom: 1; vertical-align: middle; padding: 0 30px 0 20px; }

适用于较新的浏览器。我只需要一行文本就可以轻松地将文本放在中心位置，但是当它变为两行时，我似乎无法正常工作。

Answer 1

我知道这里有很多讨厌的人（很明显是合理的）。但是你必须支持IE7 作为一项要求 - 显然我们不会在这里使用最新的技术。

所以，如果你无法使用有限的CSS集合，为什么不只是实际使用表？如果你必须支持来自2006的浏览器，那么妥协。尽管让我这样说很伤心：有时候你需要深吸一口气，把标准扔出窗外，然后自己想一想，“如果它有效，那就行了。”

Answer 2

CSS causing an UL to be indented too much in IE

删除自然出现的缩进也修复了IE7 / 8中的对齐问题。如果您需要隐藏list-style-type，只需使用margin:0; padding:0;样式。

ul {margin:0; padding:0; list-style-position:outside;}
li {list-style-type:none;}

Answer 3

我知道有两种解决方案，但每种解决方案都有一点点不适。请查看显示两者的 this demo fiddle 。

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

第二种解决方案基于this answer，其缺点是您需要在标记中添加一个额外元素。我选择了<ins>标记，但您可以使用任何其他内联元素。

Answer 4

如果我正确理解您的任务，则绝对不需要使用表格。主要原因是，如果你有多个li元素超出页面宽度，你肯定会遇到很好的问题。

那么，那是你想要实现的目标吗？

http://jsfiddle.net/EK357/

解决方案基于：http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

要缩短它，您必须为每个li元素设置这些规则：

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

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

请注意，每个inline-block元素后面都有一个额外的空格（这是margin-left: -.3em的内容。

在IE7中垂直对齐多行文本

4 个答案: