我如何集中浮动元素？
我正在实施分页，并且需要以中心为中心。 问题是链接需要显示为块，所以他们需要浮动。 但是，然后， text-align: center; 对他们不起作用。 我可以通过给左边的包装div填充来实现，但是每个页面都有不同数量的页面，所以这是行不通的。 这是我的代码：
.pagination { text-align: center; } .pagination a { display: block; width: 30px; height: 30px; float: left; margin-left: 3px; background: url(http://img.dovov.comstructure/pagination-button.png); } .pagination a.last { width: 90px; background: url(http://img.dovov.comstructure/pagination-button-last.png); } .pagination a.first { width: 60px; background: url(http://img.dovov.comstructure/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 -->
为了得到这个想法，我想要什么：
删除float inline-block并使用inline-block可能会解决您的问题：
.pagination a { - display: block; + display: inline-block; width: 30px; height: 30px; - float: left; margin-left: 3px; background: url(http://img.dovov.comstructure/pagination-button.png); }
（删除以-开始的行，并添加以+开头的行）。
.pagination { text-align: center; } .pagination a { + display: inline-block; width: 30px; height: 30px; margin-left: 3px; background: url(http://img.dovov.comstructure/pagination-button.png); } .pagination a.last { width: 90px; background: url(http://img.dovov.comstructure/pagination-button-last.png); } .pagination a.first { width: 60px; background: url(http://img.dovov.comstructure/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 -->
多年以来，我使用了一些我在博客中学到的技巧，对不起，我不记得给他学分的名字。
无论如何要集中浮动元素这应该工作：
你需要一个像这样的结构：
.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>
居中漂浮很容易 。 只需使用容器的样式：
.pagination{ display: table; margin: 0 auto; }
更改浮动元素的边距：
.pagination a{ margin: 0 2px; }
要么
.pagination a{ margin-left: 3px; } .pagination a.first{ margin-left: 0; }
并保持原样。
这是我显示菜单或分页的最佳解决scheme。
优势：
-
跨浏览器的任何元素（块，列表项等）
-
简单
弱点：
- 它只适用于所有浮动元素都在同一行的情况（通常对于菜单而言是可以的，但对于画廊来说则不是这样）。
@ arnaud576875在这种情况下，使用内联块元素将会很好（跨浏览器），因为分页只包含锚（内联），没有列表项或div：
优势：
- 适用于多行项目。
Weknesses：
-
内嵌块元素之间的差距 – 它与单词之间的空间工作方式相同。 这可能会导致一些麻烦，计算容器的宽度和造型边距。 间隙宽度不是恒定的，但它是浏览器特定的（4-5px）。 为了摆脱这种差距，我将添加到arnaud576875代码（未完全testing）：
.pagination {word-spacing：-1em; }
.pagination a {word-spacing：.1em; }
-
它不会在IE6 / 7的block和list-items元素中工作
设置您的容器的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(http://img.dovov.comstructure/pagination-button.png); } .pagination a.last { width: 90px; background: url(http://img.dovov.comstructure/pagination-button-last.png); } .pagination a.first { width: 60px; background: url(http://img.dovov.comstructure/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 -->
IE7不知道inline-block 。 您必须添加：
display:inline; zoom: 1;
text-align: center; float: none;
我认为最好的方法是使用margin而不是display 。
即：
.pagination a { margin-left: auto; margin-right: auto; width: 30px; height: 30px; background: url(http://img.dovov.comstructure/pagination-button.png); }
检查结果和代码：
添加到你的造型
position:relative; float: left; left: calc(50% - *half your container length here);
*如果你的容器宽度是50px放25px，如果是10em放5em。
只是添加
left:15%;
进入我的css菜单
#menu li { float: left; position:relative; left: 15%; list-style:none; }
也做了中心的把戏
