我在实现分页，它需要居中。问题是链接需要显示为块，因此它们需要浮动。然后，text-align: center;对他们不起作用。我可以通过给包装器div左填充来实现它，但每一页都有不同的页数，所以这是行不通的。这是我的代码:
.pagination {
text-align: center;
}
.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 -->
我想要的是:
删除浮动，并使用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]使元素生成一个内联级块容器。内联块的内部被格式化为块框，元素本身被格式化为原子内联级框。
对中浮动很容易。只需要使用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的块和列表项元素上工作
