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

margin: 0 auto;

参考。

删除浮动，并使用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]使元素生成一个内联级块容器。内联块的内部被格式化为块框，元素本身被格式化为原子内联级框。

你也可以通过改变。pagination来做到这一点，将“text-align: center”替换为两到三行css左边，变换和位置(取决于情况)。

.pagination { left: 50%; /* left-align your element to center */ transform: translateX(-50%); /* offset left by half the width of your element */ position: absolute; /* use or dont' use depending on element parent */ } .pagination a { display: block; width: 30px; height: 30px; float: left; 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 -->

对中浮动很容易。只需要使用container的样式:

.pagination{ display: table; margin: 0 auto; }

更改浮动元素的边距:

.pagination a{ margin: 0 2px; }

or

.pagination a{ margin-left: 3px; }
.pagination a.first{ margin-left: 0; } 

剩下的就顺其自然吧。

对我来说，这是显示菜单或分页等内容的最佳解决方案。

优点:

跨浏览器的任何元素(块，列表项等) 简单

缺点:

它只在所有浮动元素都在一行时才有效(这通常适用于菜单，但不适用于画廊)。

@arnaud576875使用内联块元素将工作得很好(跨浏览器)在这种情况下，分页只包含锚(内联)，没有列表项或div:

优点:

适用于多行项目。

Weknesses:

内联块元素之间的间隙-它的工作方式与单词之间的空格相同。它可能会在计算容器宽度和样式边距时造成一些麻烦。间隙宽度不是固定的，但它是浏览器特定的(4-5px)。 为了消除这个空白，我将添加到arnaud576875代码(未完全测试): .pagination{word-spacing: -1em;｝ .pagination a{word-spacing: .1em;｝ 它将无法在IE6/7的块和列表项元素上工作

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

display:inline;
zoom: 1;

将此添加到您的样式中

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

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