如何对浮子元素进行居中？

Question

如何对浮子元素进行居中？

我正在实现分页，它需要以中心为中心。问题是链接需要显示为块，所以它们需要浮动。但后来，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 -->

Answer 1

多年来我在某个博客上学到了一个老把戏，很抱歉我不记得有什么名字给他学分了。无论如何，要对浮动元素进行居中，这应该是可行的：你需要这样的结构：&nbsp; &nbsp; .main-container {&nbsp; &nbsp; &nbsp; float: left;&nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; left: 50%;&nbsp; &nbsp; }&nbsp; &nbsp; .fixer-container {&nbsp; &nbsp; &nbsp; float: left;&nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; left: -50%;&nbsp; &nbsp; }<div class="main-container">&nbsp; <div class="fixer-container">&nbsp; &nbsp; <ul class="list-of-floating-elements">&nbsp; &nbsp; &nbsp; <li class="floated">Floated element</li>&nbsp; &nbsp; &nbsp; <li class="floated">Floated element</li>&nbsp; &nbsp; &nbsp; <li class="floated">Floated element</li>&nbsp; &nbsp; </ul>&nbsp; </div></div>诀窍是向左浮动，使容器根据内容改变宽度。这是一个位置问题：相对的，在两个容器上留下了50%和-50%。好的是，这是跨浏览器，应该从IE7+工作。