如何将浮动元素居中？

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

删除floats,使用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 -->

inline-block 只要元素最初是内联元素,即使在IE6上也可以跨浏览器工作.

引自quirksmode:

内联块以内联方式放置(即与相邻内容在同一行上),但它表现为块.

这通常可以有效地替换浮点数:

当您想要为内联元素指定宽度时,实际使用此值.在某些情况下,某些浏览器不允许实际内联元素的宽度,但如果切换到display:inline-block,则允许设置宽度."(http://www.quirksmode.org/css/display .html #inlineblock).

从W3C规范:

[inline-block]使元素生成内联级块容器.内联块的内部被格式化为块框,元素本身被格式化为原子内联级框.

Answer 2

多年以来,我使用了一些我在博客中学到的老技巧,对不起,我不记得这个名字给了他学分.

无论如何中心浮动元素这应该工作:

你需要这样的结构:

    .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 +上运行.

Answer 3

定心花车很容易.只需使用容器样式:

.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中不起作用

Answer 4

设置你的容器的width中px和添加:

margin: 0 auto;

参考.

Answer 5

使用Flex

.pagination {
  text-align: center;
  display:flex;
  justify-content: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 6

text-align: center;
float: none;

Answer 7

我认为最好的方法是使用margin而不是display。

即：

.pagination a {
    margin-left: auto;
    margin-right: auto;
    width: 30px;
    height: 30px;    
    background: url(/images/structure/pagination-button.png);
}

检查结果和代码：

http://cssdeck.com/labs/d9d6ydif