如何居中浮动元素？

我正在实现分页，它须要居中。 问题在于连接须要显示为块，所以它们须要浮动。 可是而后， text-align: center; 对他们不起做用。 我能够经过给左边的wrapper 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 -->

为了获得这个主意，我想要什么：

---

#1楼

使浮子居中很容易 。 只需使用容器样式：

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

更改浮动元素的边距：

.pagination a{ margin: 0 2px; }

要么

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

剩下的一切都保留。

对于我来讲，显示菜单或分页之类的东西是最好的解决方案。

优势：

• 跨浏览器的任何元素（块，列表项等）

• 简单

弱点：

• 它仅在全部浮动元素都在一行中时才起做用（一般对于菜单而言是可行的，但对于画廊而言则不是）。

@ arnaud576875在这种状况下，使用内联块元素很是有用（跨浏览器），由于分页仅包含锚点（内联），没有列表项或div：

优势：

• 适用于多行项目。

缺点：

• 内联块元素之间的间隙 -它的做用方式与单词之间的空格相同。 这可能会在计算容器的宽度和样式边距时形成一些麻烦。 间隙宽度不是恒定的，而是特定于浏览器的（4-5px）。 为了消除这些差距，我将添加到arnaud576875代码（未经充分测试）：

  .pagination {字距：-1em； }

  .pagination a {单词间距：.1em; }

• 在IE6 / 7的block和list-items元素上将不起做用

---

#2楼

设置容器的width以px并添加：

margin: 0 auto;

参考 。

---

#3楼

IE7不知道inline-block 。 您必须添加：

display:inline;
zoom: 1;

---

#4楼

多年以来，我一直使用在某个博客中学到的老技巧，对不起，我不记得要给他积分的名字了。

不管如何将浮动元素居中，这都应该起做用：

您须要这样的结构：

.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>

诀窍是让浮子左移以使容器根据内容改变宽度。 而不是位置问题：相对和在两个容器上分别保留50％和-50％。

好在，这是跨浏览器，应该能够在IE7 +上运行。

---

#5楼

只需添加

left:15%;

进入个人CSS菜单

#menu li {
float: left;
position:relative;
left: 15%;
list-style:none;
}

也作了对中技巧