如何将浮动元素居中？

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

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

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

margin: 0 auto;

参考.

使用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);
}

  First
  1
  2
  3
  Last

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