如何使浮动元素居中？

Question

如何使浮动元素居中？

397

我正在实现分页功能，需要将分页居中显示。但问题在于链接需要作为块级元素来显示，因此需要进行浮动。但是，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 -->

想要理解我所需要的内容，请参考下面的图片：

alt text

- Mike

1

浮动属性的整个目的是将元素沿其容器的左侧或右侧定位。 - Rob

3

@Rob: 我需要为链接元素定义宽度和高度，这只能在块元素上完成，但是当你将链接元素变成块级元素时，它们会在新行上展开，所以我让它们浮动起来。 - Mike

当您不想/无法使用inline-block时，可以使用另一种解决方案。https://dev59.com/i3M_5IYBdhLWcg3wyWSt - hakunin

1

我认为这个问题需要版主的注意，因为它的当前标题和答案是误导性的。这个问题不是关于浮动内容在中心，而是关于居中内容。浮动意味着非浮动兄弟内容应该填补剩余的空白，这显然既不是期望的，也没有实现。 - tao

9

如果你认为需要修改某个问题，建议你进行编辑，而不是将其标记为管理员。任何人都可以对这些问题进行编辑，因此请编辑问题并在编辑原因中写下详细说明。这是任何用户都可以做到的事情，不一定非得是管理员。该问题或任何答案并没有需要管理员干预的问题。 - Zoe stands with Ukraine

12个回答

161

多年来，我一直在使用我从某个博客学到的老技巧。很抱歉我不记得他的名字以便致谢。

无论如何，要居中浮动元素，可以使用以下方法：

你需要像这样的结构：

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

技巧在于给容器设置float:left，从而使容器根据内容改变宽度。然后是将两个容器分别设为position:relative，并在left属性中设置50%和-50%。

好的一点是这是跨浏览器的，在IE7+上应该能够工作。

- lukart

3

提醒一下，如果只有一个单独的浮点数元素，这个方法才有效。 - Wtower

1

对我来说，在 .main-container 和 .fixer-container 上不需要使用 float: left;。 - csum

@cleversprocket 我通过将所有内容包装在一个带有 overflow: hidden; 的单个 div 中解决了水平滚动问题。 - csum

如果浮点数由于窗口大小而中断，则“浮点数”将不再存在！ - Dollique

2

可能那是我：https://webmonkeyswithlaserbeams.wordpress.com/2008/07/09/float-center/。我正在寻找我的旧博客，然后这个SO问题首先出现了。 - Jon Wolski

显示剩余3条评论

40

居中浮动元素非常容易。只需在容器上使用以下样式：

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

更改浮动元素的外边距：

.pagination a{ margin: 0 2px; }

或者

.pagination a{ margin-left: 3px; }
.pagination a.first{ margin-left: 0; }

并将其余部分保持不变。

对于我来说，这是显示菜单或分页等内容的最佳解决方案。

优点：

适用于任何元素（块、列表项等）的跨浏览器
简单易用

缺点：

仅在所有浮动元素位于一行时才有效（通常适用于菜单但不适用于图库）。

@arnaud576875 在此情况下，使用内联块级元素非常好（跨浏览器），因为分页只包含锚点（内联），没有列表项或div：

优点：

适用于多行项目。

缺点：

内联块之间的间隙 - 它与单词之间的空格方式相同。它可能会导致计算容器宽度和样式边距方面的一些麻烦。间隙宽度不是固定的，而是特定于浏览器（4-5px）。要摆脱这些间隙，我会向arnaud576875代码添加（未完全测试）：

.pagination{ word-spacing: -1em; }

.pagination a{ word-spacing: .1em; }
在IE6 / 7上，它不适用于块和列表项元素

- romprzy

1

显示：表格技巧真是令人难以置信，只需几行代码就能完美实现所有功能。我需要记住这个。干杯！ - kilop

内联块技术非常有效。幸运的是，我正在使用的元素（嵌套的div元素）可以很好地处理间隙。 - karolus

您还可以通过将字体大小降为零，然后在子元素中恢复到先前的值来消除inline-block间隙。 - Mike Causer

18

将容器的宽度设置为px并添加：

margin: 0 auto;

参考资料。

- user1642018

1

对我来说，这是最好的答案 :P。 - alansiqueira27

5

只有当容器的宽度适合时，这才会起作用。但容器中包含浮动元素时就会出现问题。 - Wtower

13

使用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(/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 -->

- Santosh Khalse

5

我认为最好的方法是使用margin而不是display。

例如：

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

查看结果和代码：

http://cssdeck.com/labs/d9d6ydif

- Tarod

1

只需使用margin: auto;即可工作，而不需要单独设置左右属性。 - cellepo

5

text-align: center;
float: none;

- Michael

3

你也可以通过更改 .pagination 来实现此操作，将 "text-align: center" 替换为左、transform 和（根据情况）position 的两到三行 CSS。

.pagination {
  left: 50%; /* left-align your element to center */
  transform: translateX(-50%); /* offset left by half the width of your element */
  position: absolute; /* use or dont' use depending on element parent */
}
.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 -->

- mwag

2

IE7不支持inline-block属性。需要添加以下代码：

display:inline;
zoom: 1;

- Krisada Art

1

将此添加到您的样式中。

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

如果您的容器宽度为50px，则输入25px；如果它为10em，则输入5em。

- phurst-so

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，

- Arnaud Le Blanc · Accepted Answer

删除 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);
 }

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

.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 能够跨浏览器使用，甚至能在IE6上使用，只要该元素最初是一个内联元素。

引自 quirksmode:

内联块级元素放置在同一行（即与相邻内容在同一行），但是它的行为类似于块级元素。

在许多情况下，它可以有效地替换浮动：

这个属性真正的用处是当你想给一个内联元素设置宽度时。在某些情况下，一些浏览器不允许在真正的内联元素上设置宽度，但是如果你将其切换为 display:inline-block，你就可以设置宽度。(来源：http://www.quirksmode.org/css/display.html#inlineblock)

来自W3C规范：

[inline-block] 会导致元素生成一个内联块级容器。内联块级元素的内部格式化为块级盒子，而元素本身则格式化为原子级内联盒子。