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

我想要的是:


当前回答

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

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

你需要一个这样的结构:

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

其他回答

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

display:inline;
zoom: 1;

对中浮动很容易。只需要使用container的样式:

.pagination{ display: table; margin: 0 auto; }

更改浮动元素的边距:

.pagination a{ margin: 0 2px; }

or

.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的块和列表项元素上工作

将此添加到您的样式中

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

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

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

例如:

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

检查结果和代码:

http://cssdeck.com/labs/d9d6ydif

text-align: center;
float: none;