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

这个问题很简单，但似乎找不到解决办法。我有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>

我

顾客

---

如果12和45的宽度是固定的，那么使用css float无法实现这一点，那么必须使用类似绝对定位的方法。 有关详细信息，请提供当前页面状态的链接或其他代码。

尝试以下操作：

如果你有两个浮动div，那么你就知道利润率。问题 这就是浮点数：右边的div应该放在中间的div之前 基本上你会有：

左浮动|右浮动|居中

现在，关于边距：通常你可以使用边距：0自动，对吗？ 问题是，现在您知道了边距的值： 漂浮潜水艇！因此，您只需使用：

边距：0右浮动宽度0左浮动宽度

那应该有用

---

请参阅：

将

位置：相对

添加到容器，以允许

箭头相对于容器绝对定位。使用
top:50%
和
left:50%
（百分比相对于容器）将
.arrows
定位在容器的中心位置，然后使用
transform:translate（-50%，-50%）
（百分比相对于
.arrows
）将
箭头移动到左上方一点

有关水平/垂直居中的示例或完整教程，请参见

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

.arrows {
    margin: 0 auto;
}

由于浮动元素首先在正常文档流之外，因此应该可以将左浮动元素和右浮动元素组合在一起。然后我们可以创建一个“假”包装，填充整个容器。如果我们知道要居中的元素的宽度，则可以使用边距居中

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

如果我们不知道居中元素的宽度，请查看问题并在那里应用解决方案

请注意，所提供的解决方案假设中心宽度永远不会比左侧和右侧的两列宽。如果要对此设置保护措施，则应设置最大宽度百分比（示例将每列限制为总宽度的三分之一）：

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



html，body，p{
保证金：0；
填充：0；
}
#信息图表*{
宽度：10%；
高度：30px；
背景：水鸭；
填充：0；
利润率：0.1%；
}
#信息图表。图标一，#信息图表。图标一+p{
浮动：左；
}
#信息图表。图标二，#信息图表。图标二+p{
浮动：对；
}
#信息图表.箭头{
保证金：0自动；
文本对齐：居中；
}

我

顾客

箭
哪些元素具有静态with，哪些元素具有动态with？所有元素都具有动态宽度@Andreas Furster一个简单的选择是将中间元素放在HTML的最后，并将其他元素左右浮动。。。但这可能不适合你。这也是flexbox的一个很好的用例。。。但是你会缺少对旧浏览器的支持。非常好用！谢谢你的小提琴；）
<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>

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

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