CSS: float 元素之间的中心元素

Question

很简单的问题，但似乎无法找到解决方案。我有 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>

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

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