Question

我有一个ul，我需要在div中居中。我所拥有的代码（您将在下面找到）适用于除了ie6＆amp; ie7其中内容浮动而不是居中。我已经删除了我的代码到基础知识。我已经尝试通过大量修复工作但尚未成功，所以对此的任何帮助都将非常感激。

//CSS
#galleryThumbs {
    width:900px;
    height:125px;
    text-align:center;
    margin:0px auto;
}
ul.thumb {
    margin:0;
    padding:0;
    list-style:none;
    display:inline-block;
}
ul.thumb li {
    width:65px;
    height:65px;
    margin:0 2px 0 2px;
    border:1px solid #ffffff;
    display:inline-block;
    float:left;
}

//HTML
<div id="galleryThumbs">
    <ul class="thumb">
        <li><img src="http://www.thewoom.co.uk/clients/lowdklea/work/01_thumb1.jpg"></li>
        <li><img src="http://www.thewoom.co.uk/clients/lowdklea/work/01_thumb2.jpg"></li>
        <li><img src="http://www.thewoom.co.uk/clients/lowdklea/work/01_thumb3.jpg"></li>
    </ul>
</div>

非常感谢提前布伦丹

Answer 1

IE 6和IE 7不支持display:inline-block

您可以使用IE CSS hack覆盖inline-block元素

zoom: 1;
*display: inline;

我会把那些包含在IE条件评论中的内容放到目标IE中。

http://www.jsfiddle.net/gaby/qArVS/2

演示

Answer 2

IE6 / 7不支持默认display: inline-block的元素display: block。另请参阅Quirksmode.org: CSS2 - The display declaration：

IE 6/7仅接受具有自然display: inline的元素的值。

<ul>默认为display: block，因此无效。

其中一个解决方案是为<ul>提供固定的宽度，以便margin: 0 auto可以将其居中于其父级。

Answer 3

没有hacks for Internet Explorer 7的解决方案将添加到您的代码中：

    #yourdiv {
            width: 100%;
            position: relative;
            text-align: center;
    }

            #yourdiv ul {
                    float: left;
                    position: relative;
                    left: 50%
                    text-align: center;
            }

                    #yourdiv ul li {
                            float: left;
                            position: relative;
                            display: block;
                            right: 50%;                
                    }

使用此功能，您可以在Internet Explorer 7中将未排序的列表置于中间位置。

Answer 4

以上（我的意思是具有UL宽度声明的解决方案）解决方案是我唯一提出的解决方案。顺便说一下，有两件事：

1-您对Doctype的声明正在触发怪癖模式，因为img标签未正确关闭xhtml样式。

2- Paniyar为Float，CENTER开发了一处新物业。它不存在。至少不在我的书中。

我的两分钱......

需要将一个ul置于div中，即6＆amp; IE7

4 个答案: