Question

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

示例：

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

HTML code：

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

Answer 2

如果12和45具有固定宽度，则无法使用css float实现此目的，您必须使用类似绝对定位的内容。有关更多信息，请输入当前状态的页面链接或更多代码。

Answer 3

试试这个：

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

左浮动|右浮动|中心

现在，关于边距：通常你可以使用保证金：0自动，对吧？   问题是，现在您知道边距的值：   漂浮的divs！所以你只需要使用：

margin：0 right-floated-width 0 left-floated-width

这应该有用......

请参阅：this answer

Answer 4

将position: relative添加到容器中，以允许.arrows绝对相对于容器定位。使用.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;
}

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

Answer 5

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

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

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

5 个答案: