CSS 垂直对齐 IE 6 & 7 问题答案

【问题标题】：CSS vertical align IE 6 & 7 problemCSS 垂直对齐 IE 6 & 7 问题
【发布时间】：2010-10-23 17:42:27
【问题描述】：

您好，我有以下代码：

...
                    <li><a href="">
                        <span class="nr">2</span>
                        <span class="item">Despre clinic&atilde;</span>
                        <span class="img"><img src="/images/footer_navi_icon1.gif" alt=""/></span>
                    </a></li>
                    <li><a href="">
                        <span class="nr">3</span>
                        <span class="item">Servicii</span>
                        <span class="img"><img src="/images/footer_navi_icon1.gif" alt=""/></span>
                    </a></li>
                    <li><a href="">
                        <span class="nr">4</span>
                        <span class="item">Echipa medical&atilde;</span>
                        <span class="img"><img src="/images/footer_navi_icon1.gif" alt=""/></span>
                    </a></li>
...

和css：

#footer .navi { margin: 0; padding: 0; list-style: none; }
#footer .navi li { width: 207px; height: 85px; background: url(../images/footer_navi.gif) 0 0 no-repeat; float: left; vertical-align: middle; display: table-row; }
#footer .navi a { width: 207px; height: 85px; color: #CC0000; text-decoration: none; }
#footer .navi span.img { height: 85px; vertical-align: middle; display: table-cell; }
#footer .navi span.item { height: 85px; padding: 0 5px; width: 83px; font-size: 16px; vertical-align: middle; display: table-cell; }
#footer .navi span.nr { height: 85px; padding: 0 9px; width: 9px; font-size: 20px; color: #FF9999; vertical-align: middle; display: table-cell; }

如您所见，我为.item 设置了宽度，所以我的文本会换行。由于 IE 不支持 table-cell 和 table-row 我已经完成了 * html #footer .navi li {display: block;} 和我的跨度的内联块。

现在我有 2 个问题：

除非我为 IE6&7 设置最大宽度，否则我的文本不会换行
尽管使用 Star hack IE6 和 7 仍无法很好地呈现

有什么想法吗？谢谢

【问题讨论】：

为什么不使用表格呢？
我知道使用表格布局会容易得多。但表格不是为此而设计的。表格用于组织数据。菜单将使用列表创建。
啊，这是菜单。我以为是表格数据。
是的，可能还不清楚:)

标签： css vertical-alignment

【解决方案1】：

使用无表 css 最难的事情之一。

我的代码最初是为带有 div 元素的 img 元素编写的，但也应该像这样工作。

为解释添加了层次结构。

li {
    width:207px;
    height:85px;
    float:left;
    text-align:center;
    display:table;
    overflow:hidden;
    #position:relative;
    #z-index:1;
}
li a {
     #display:block;
     #position: relative;
     #top: -50%;
     #left: -50%;
     display:table-cell;
     vertical-align:middle;
     margin:0 auto;
}
li a span {
    #display:block;
    #position: absolute;
    #top: 50%;
    #left: 50%;
    display:table-cell;
    vertical-align:middle;
    margin:0 auto;
}

【讨论】：