如何居中浮动元素？

我正在实现分页，它需要居中。问题在于链接需要显示为块，因此它们需要浮动。但是然后， 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;
}

也做了对中技巧

来源：oschina

链接：https://my.oschina.net/u/3797416/blog/3189448

标签

pagination

wrapper