因为多年来我一直在用我在一些博客里学到的老把戏，很抱歉我不记得他的名字了。

无论如何，将浮动元素居中，这应该是可行的:

你需要一个这样的结构:

.main-container { 浮:左; 位置:相对; 左:50%; ｝ .fixer-container { 浮:左; 位置:相对; 左:-50%; ｝ < div class = "集装箱" > < div class = " fixer-container”> < ul类= " list-of-floating-elements " > <li class=" floats ">浮动元素</li> . > <li class=" floats ">浮动元素</li> . > <li class=" floats ">浮动元素</li> . > < / ul > < / div > < / div >

诀窍是给浮动左，使容器改变宽度取决于内容。比是一个位置问题:相对和左50%和-50%的两个容器。

好在这是跨浏览器的，应该可以在IE7+上工作。

删除浮动，并使用inline-block可以解决你的问题:

 .pagination a {
-    display: block;
+    display: inline-block;
     width: 30px;
     height: 30px;
-    float: left;
     margin-left: 3px;
     background: url(/images/structure/pagination-button.png);
 }

(删除以-开头的行，并添加以+开头的行。)

.pagination { text-align: center; } .pagination a { + display: inline-block; width: 30px; height: 30px; margin-left: 3px; background: url(/images/structure/pagination-button.png); } .pagination a.last { width: 90px; background: url(/images/structure/pagination-button-last.png); } .pagination a.first { width: 60px; background: url(/images/structure/pagination-button-first.png); } <div class='pagination'> <a class='first' href='#'>First</a> <a href='#'>1</a> <a href='#'>2</a> <a href='#'>3</a> <a class='last' href='#'>Last</a> </div> <!-- end: .pagination -->

inline-block可以跨浏览器工作，即使在IE6上，只要元素原来是一个内联元素。

引用自quirksmode:

一个内联块被放置在内联(即。与相邻内容在同一行)，但它表现为块。

这通常可以有效地取代浮动:

这个值的真正用途是当您想给内联元素一个宽度时。在某些情况下，一些浏览器不允许在真正的内联元素上设置宽度，但如果您切换到display: inline-block，则允许设置宽度。(http://www.quirksmode.org/css/display.html#inlineblock)。

来自W3C规范:

[inline-block]使元素生成一个内联级块容器。内联块的内部被格式化为块框，元素本身被格式化为原子内联级框。

因为多年来我一直在用我在一些博客里学到的老把戏，很抱歉我不记得他的名字了。

无论如何，将浮动元素居中，这应该是可行的:

你需要一个这样的结构:

.main-container { 浮:左; 位置:相对; 左:50%; ｝ .fixer-container { 浮:左; 位置:相对; 左:-50%; ｝ < div class = "集装箱" > < div class = " fixer-container”> < ul类= " list-of-floating-elements " > <li class=" floats ">浮动元素</li> . > <li class=" floats ">浮动元素</li> . > <li class=" floats ">浮动元素</li> . > < / ul > < / div > < / div >

诀窍是给浮动左，使容器改变宽度取决于内容。比是一个位置问题:相对和左50%和-50%的两个容器。

好在这是跨浏览器的，应该可以在IE7+上工作。

在px中设置容器的宽度，并添加:

margin: 0 auto;

参考。

将此添加到您的样式中

position:relative;
float: left;
left: calc(50% - *half your container length here);

*如果你的容器宽度是50px，放25px，如果是10em，放5em。

IE7不知道内联块。 你必须补充:

display:inline;
zoom: 1;