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

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

多年来我在某个博客上学到了一个老把戏，很抱歉我不记得有什么名字给他学分了。

无论如何，要对浮动元素进行居中，这应该是可行的：

你需要这样的结构：

    .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+工作。