CSS：浮动元素之间的中心元素答案

【问题标题】：CSS: center element between floating elementsCSS：浮动元素之间的中心元素
【发布时间】：2014-12-28 13:52:59
【问题描述】：

很简单的问题，但似乎无法找到解决方案。我有 5 个元素：2 个向左浮动，2 个向右浮动。无论屏幕宽度如何，第五个元素都应该位于 div 的完美中心 (#infographic)。

示例：

1,2 -- 3 -- 4,5 或 1,2 ----- 3 ----- 4,5

HTML 代码：

<div id="infographic">
  <div class="icon-one"></div>
  <p>me</p>
  <div class="arrows"></div>
  <p>customer</p>
  <div class="icon-two"></div>
</div>

有什么建议可以让元素居中吗？

【问题讨论】：

哪些是静态的，哪些是动态的？
所有元素都有动态宽度。 @Andreas Furster
一个简单的选择是将中间元素放在 HTML 中的最后，其他元素左右浮动......但这可能不适合你。这也是 flexbox 的一个很好的用例……但是你会在旧浏览器中缺乏支持。

标签： css responsive-design

【解决方案1】：

我猜这就是您要寻找的输出：

DEMO

html, body,p{
    margin:0;
    padding:0;
}
#infographic * {
    width:10%;
    height:30px;
    background:teal;
    padding:0;
    margin:0 1%;
}
#infographic .icon-one, #infographic .icon-one + p {
    float:left;
}
#infographic .icon-two, #infographic .icon-two + p {
    float:right;
}
#infographic .arrows{
    margin:0 auto;
    text-align:center;
}

<div id="infographic">
    <div class="icon-one"></div>
    <p>me</p>
    <div class="icon-two"></div>
    <p>customer</p>
    <div class="arrows">arrows</div>
</div>

【讨论】：

完美运行！谢谢你的小提琴；）

【解决方案2】：

首先，应该可以将左右浮动元素组合在一起。然后我们可以做的是创建一个填充整个容器的“假”包装。如果我们知道要居中的元素的宽度，则可以使用边距将其居中。

<div id="infographic">
<div class='leftcol left'>
  <div class="icon-one left">1</div>
  <p class='left'>me</p>
   <div class='clear'></div>
</div>
<div class='rightcol right'>
  <p class='right'>customer</p>
  <div class="icon-two right">2</div>
    <div class='clear'></div>
</div>
<div class='center'>
      <div class="arrows">A</div>
</div>
</div>

CSS：

.left {
float: left; }
.right {
float: right;}

.center {
    overflow: hidden;
    position: absolute;
    width: 100%;
}
.arrows {
    margin: 0 auto;
    display: block;
    width: 30px;
}
.clear {
    clear: both;
}
#infographic {
    position: relative;
}

如果我们不知道居中元素的宽度，请查看问题Centering a div block without the width 并在此处应用解决方案。

请注意，所提出的解决方案假定中心宽度永远不会变得比左右两列宽。如果您想对此进行保护，您应该像这样设置最大宽度百分比（示例将每列限制为总宽度的三分之一）：

.leftcol .rightcol .arrows {
    max-width: 33.3%
}

【讨论】：

【解决方案3】：

将position: relative 添加到容器中，以允许.arrows 相对于容器绝对定位。使用top: 50% 和left: 50%（百分比相对于容器）将.arrows 定位在容器的中心，然后使用transform: translate(-50%, -50%)（百分比为相对于.arrows)

.arrows {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

有关示例，请参阅 http://codepen.io/ckuijjer/pen/rhEgy 或有关水平/垂直居中的完整教程，请参阅 http://css-tricks.com/centering-css-complete-guide/。

如果它只是关于水平居中，你甚至可以使用

.arrows {
    margin: 0 auto;
}

因为浮动元素是在正常文档流之外获取的

【讨论】：

【解决方案4】：

试试这个：

如果您有两个浮动 div，那么您就知道边距。问题是浮动：右div应该放在中间div之前。所以基本上你将拥有：

左浮动 |右浮动 |居中

现在，关于边距：通常你可以只使用 margin:0 auto，对吧？问题是现在您知道边距的值：浮动div！所以你只需要使用：

margin:0 右浮动宽度 0 左浮动宽度

应该可以的...

见：this answer

【讨论】：

【解决方案5】：

如果 12 和 45 具有固定宽度，则使用 css float 无法实现这一点，您必须使用绝对定位之类的东西。如需更多信息，请提供指向当前状态页面的链接或更多代码。

【讨论】：