css-float - 如何居中浮动元素？(How do I center floated elements?)

Question

I'm implementing pagination, and it needs to be centered.

(我正在实现分页，它需要居中。)

The problem is that the links need to be displayed as block, so they need to be floated.

(问题在于链接需要显示为块，因此它们需要浮动。)

But then, text-align: center;

(但是然后， text-align: center;)

doesn't work on them.

(对他们不起作用。)

I could achieve it by giving the wrapper div padding of left, but every page will have a different number of pages, so that wouldn't work.

(我可以通过给左边的wrapper div填充来实现，但是每个页面都有不同数量的页面，所以这是行不通的。)

Here's my code:

(这是我的代码：)

 .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 --> 

To get the idea, what I want:

(为了得到这个主意，我想要什么：)

  ask by Mike translate from so

Answer 1

Removing float s, and using inline-block may fix your problems:

(删除float并使用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);
 }

(remove the lines starting with - and add the lines starting with + .)

(（删除以-开头的行，并添加以+开头的行。）)

 .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 works cross-browser, even on IE6 as long as the element is originally an inline element.

(inline-block即使在IE6上也可以跨浏览器运行，只要该元素最初是一个inline元素即可。)

Quote from quirksmode :

(从quirksmode引用：)

An inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block.

(内联块被内联放置（即，与相邻内容位于同一行），但是它的行为就像一个块。)

this often can effectively replace floats:

(这通常可以有效地替换浮点数：)

The real use of this value is when you want to give an inline element a width.

(该值的真正用途是当您要向内联元素赋予宽度时。)

In some circumstances some browsers don't allow a width on a real inline element, but if you switch to display: inline-block you are allowed to set a width.” ( http://www.quirksmode.org/css/display.html#inlineblock ).

(在某些情况下，某些浏览器不允许在真正的内联元素上使用宽度，但是如果您切换到显示：内联块，则可以设置宽度。”（ http://www.quirksmode.org/css/display .html＃inlineblock ）。)

From the W3C spec :

(根据W3C规范 ：)

[inline-block] causes an element to generate an inline-level block container.

([inline-block]使元素生成一个内联级别的块容器。)

The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

(内联块的内部被格式化为块框，元素本身被格式化为原子内联级别框。)