我如何集中浮动元素？
我正在实施分页，并且需要以中心为中心。 问题是链接需要显示为块，所以需要浮动。 但是，然后， 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 --> 删除float inline-block并使用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 -->多年以来，我使用一些我在某个博客上学到的技巧，对不起，我不记得给他学分的名字。
无论如何中心浮动元素这应该工作：
你需要一个像这样的结构：
.main-container {
float: left;
position: relative;
left: 50%;
}
.fixer-container {
float: left;
position: relative;
left: -50%;
}<div class="main-container">
<div class="fixer-container">
<ul class="list-of-floating-elements">
<li class="floated">Floated element</li>
<li class="floated">Floated element</li>
<li class="floated">Floated element</li>
</ul>
</div>
</div>居中漂浮很容易 。 只需使用容器的样式：
.pagination{ display: table; margin: 0 auto; }
更改浮动元素的边距：
.pagination a{ margin: 0 2px; }
要么
.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的block和list-items元素中工作