Question

您好我有以下代码：

...
                    <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，我已经为{span}做了* html #footer .navi li {display: block;}和inline-block。

现在我有两个问题：

我的文字不会换行，除非我为IE6＆amp; 7
尽管使用明星黑客IE6＆amp; 7仍然无法呈现

有什么想法吗？感谢

Answer 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;
}

CSS垂直对齐IE 6＆amp; 7问题

1 个答案: