如何中心浮动元素？ [英] How do I center float elements?

问题描述

我正在实施分页，它需要居中。问题是链接需要显示为块，因此它们需要被浮动。但是， text-align：center; 不适用于他们。我可以通过给左边的封装div填充，但每一页将有不同数量的页面，这样就不会工作，实现它。这是我的代码：

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

想想，我想要的：

img src =https://i.stack.imgur.com/XYZzC.jpgalt =alt text>

推荐答案

删除 float s，并使用 inline-block 可能会解决您的问题：

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

 .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 只要元素最初是内联元素。

inline-block works cross-browser, even on IE6 as long as the element is originally an inline element.

引用 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:

这个值的真正用途是当你想给一个内联元素一个宽度。在某些情况下，一些浏览器不允许在一个真正的内联元素上的宽度，但如果你切换到display：inline-block你可以设置宽度。（ http://www.quirksmode.org/css/display.html#inlineblock ）。

从 W3C规格：

[inline-block]导致元素生成内联级块容器。 inline-block的内部被格式化为块框，并且元素本身被格式化为原子行内框。

[inline-block] causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

这篇关于如何中心浮动元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！