【问题标题】：How do I center floated elements?如何使浮动元素居中？
【发布时间】：2011-06-13 16:04:20
【问题描述】：

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

为了得到这个想法，我想要什么：

【问题讨论】：

float 属性的全部目的是将元素定位在其容器的左侧或右侧。
@Rob：嗯，我需要为链接元素定义宽度和高度，这只能在块元素上完成，但是当你制作链接块时，它们每个都在新行上展开，那就是为什么我让它们漂浮。
替代解决方案，当您不想/不能使用内联块时。 stackoverflow.com/questions/1232096/…
我认为这个问题值得版主注意，因为它当前的标题和答案具有误导性。问题不是关于在中心浮动内容，而是关于居中内容。浮动意味着非浮动的同级内容应该填补剩余的空白，这显然既不需要也在这里实现。
@AndreiGheorghiu 如果你这么认为，建议编辑而不是为模组标记它。任何人都可以编辑这些问题，因此请编辑问题并在编辑原因中写下详细说明。这是任何用户都可以做的事情，它不必是版主。问题或任何需要主持人干预的答案都没有问题

标签： css-float center css

【解决方案1】：

删除floats 并使用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 spec：

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

【讨论】：

提示：不要忘记垂直对齐。
是的，这是我发现的为数不多的几个案例之一，其中垂直对齐实际上可以满足您的期望。
这种方法的缺点是水平间距难以控制，元素之间可能会出现空白。
@XavierPoinas：使用字体大小：0；在父母身上解决这个问题
请记住，虽然“font-size: 0”过去不适用于 Android 设备。不确定最新版本是否仍然如此。

【解决方案2】：

多年来我一直在使用我在某个博客中学到的老把戏，很抱歉我不记得给他起名的名字了。

无论如何要使浮动元素居中，这应该可以：

你需要这样的结构：

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

诀窍是给左浮动以使容器根据内容改变宽度。比是一个位置问题：相对并在两个容器上留下 50% 和 -50%。

好在这是跨浏览器，应该可以在 IE7+ 上运行。

【讨论】：

提醒一下，如果只有 1 个浮动元素，则此方法有效。
这个问题是水平滚动条会出现，因为外部 div 超出了屏幕。此外，当列表换行到另一行时，整个事情就会左对齐。
如果不设置容器最大宽度，这不会有什么不同，margin: 0 auto; 在这种情况下做得更好
对我来说，float: left; 在.main-container 和.fixer-container 上是不必要的。
那可能是我：webmonkeyswithlaserbeams.wordpress.com/2008/07/09/float-center。我正在搜索我的旧博客，首先出现了这个 SO 问题。

【解决方案3】：

居中浮动很容易。只需使用容器的样式：

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

更改浮动元素的边距：

.pagination a{ margin: 0 2px; }

或

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

其余部分保持原样。

这是显示菜单或分页等内容的最佳解决方案。

优势：

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

弱点：

仅当所有浮动元素都在一行时才有效（这通常适用于菜单，但不适用于画廊）。

@arnaud576875 在这种情况下，使用 inline-block 元素会很好（跨浏览器），因为分页只包含锚点（内联），没有列表项或 div：

优势：

适用于多行项目。

弱点：

inline-block 元素之间的间隙 - 它的工作方式与单词之间的空格相同。计算容器的宽度和样式边距可能会导致一些麻烦。间隙宽度不是恒定的，而是特定于浏览器的（4-5px）。为了消除这些差距，我将添加到 arnaud576875 代码（未完全测试）：

.pagination{ 字间距：-1em; }

.pagination a{ 字间距：.1em; }
它在 IE6/7 中对块和列表项元素不起作用

【讨论】：

display: table 技巧令人难以置信，只用几行就完成了所有事情。我需要记住这一点。干杯
内联块技术非常有效。幸运的是，我使用的元素（嵌套的 div 元素）可以很好地处理这个差距。
您还可以通过将字体大小降至零来消除行内块间隙，然后在子元素中恢复为之前的值

【解决方案4】：

在px 中设置容器的width 并添加：

margin: 0 auto;

Reference.

【讨论】：

对我来说，这是最好的答案：P。
这只有在容器宽度合适的情况下才有效，这是包含浮动元素时的问题。

【解决方案5】：

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

【讨论】：

【解决方案6】：

text-align: center;
float: none;

【讨论】：

【解决方案7】：

我认为最好的方法是使用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

【讨论】：

只使用边距：自动；而不是单独的左右属性。

【解决方案8】：

您也可以通过将“text-align: center”替换为两到三行 CSS 来更改 .pagination 来实现这一点，用于左侧、变换以及根据情况而定的位置。

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

【讨论】：

【解决方案9】：

IE7 不知道inline-block。您必须添加：

display:inline;
zoom: 1;

【讨论】：

【解决方案10】：

将此添加到您的样式中

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

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

【讨论】：

【解决方案11】：

<!DOCTYPE html>
<html>
<head>
    <title>float object center</title>
    <style type="text/css">
#warp{
    width:500px;
    margin:auto;
}
.ser{
width: 200px;
background-color: #ffffff;
display: block;
float: left;
margin-right: 50px;
}
.inim{
    width: 120px;
    margin-left: 40px;
}

    </style>
</head>
<body>



<div id="warp">
            <div class="ser">
              <img class="inim" src="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">

              </div>
           <div class="ser">
             <img class="inim" sr`enter code here`c="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">

             </div>
        </div>

</body>
</html>

步骤 1

创建两个或多个你想要的 div，并给它们一个确定的宽度，例如 100px，然后将其向左或向右浮动

第二步

然后将这两个 div 扭曲到另一个 div 中，并给它 200px 的宽度。对此 div 应用边距自动。繁荣它工作得很好。检查上面的例子。

【讨论】：

【解决方案12】：

只是添加

left:15%;

进入我的css菜单

#menu li {
float: left;
position:relative;
left: 15%;
list-style:none;
}

也做了居中技巧

【讨论】：

15% 完全是任意的。