如何居中浮动元素?

我在实现分页，它需要居中。问题是链接需要显示为块，因此它们需要浮动。然后，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>

我想要的是:

当前回答

我认为最好的方法是用边距代替显示。

例如:

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

检查结果和代码:

http://cssdeck.com/labs/d9d6ydif

2015-05-28 06:49:39

其他回答

IE7不知道内联块。你必须补充:

display:inline;
zoom: 1;

2013-10-08 08:51:38

text-align: center;
float: none;

2015-02-22 10:34:02

在px中设置容器的宽度，并添加:

margin: 0 auto;

参考。

2013-09-19 17:15:11

因为多年来我一直在用我在一些博客里学到的老把戏，很抱歉我不记得他的名字了。

无论如何，将浮动元素居中，这应该是可行的:

你需要一个这样的结构:

.main-container { 浮:左; 位置:相对; 左:50%; ｝ .fixer-container { 浮:左; 位置:相对; 左:-50%; ｝ < div class = "集装箱" > < div class = " fixer-container”> < ul类= " list-of-floating-elements " > <li class=" floats ">浮动元素</li> . > <li class=" floats ">浮动元素</li> . > <li class=" floats ">浮动元素</li> . > < / ul > < / div > < / div >

诀窍是给浮动左，使容器改变宽度取决于内容。比是一个位置问题:相对和左50%和-50%的两个容器。

好在这是跨浏览器的，应该可以在IE7+上工作。

2014-02-02 08:22:57

将此添加到您的样式中

position:relative;
float: left;
left: calc(50% - *half your container length here);

*如果你的容器宽度是50px，放25px，如果是10em，放5em。

2017-05-23 21:00:14

如何居中浮动元素?

推荐文章

最新文章

标签