在其他跨度之间居中div或span

Question

我有一个div容器，其中已有2个跨度：一个向左浮动，一个向右浮动。现在我想添加第三个跨度，它将位于div的中心。

我已经尝试了很多东西，大多数有希望的曲目都包含了这个应该是中心的跨度：

position: absolute;
overflow: hidden;
display: inline-block;
margin-left: 0px;
margin-right: 0px;

我甚至尝试过使用标签并将其与位置相结合：绝对几乎给出我想要的东西，除了居中的文字在另一条线上。

左浮动元素没有样式，因为默认情况下是浮动的 正确的浮动元素除了：

之外什么都没有

float:right;

Answer 1

最好的方法是将text-align: center放入父 div：

div {
  text-align: center;
}
div>span:first-child {
  float: left;
}
div>span:nth-child(3) {
  float: right;
}

<div>
  <span>Left</span>
  <span>Center</span>
  <span>Right</span>
</div>

JSFiddle

Answer 2

在要居中的元素上左右使用自动边距：

margin-left:auto;
margin-right:auto;

Answer 3

如果我正确理解了您的问题，我已经创建了一个示例小提琴http://jsfiddle.net/8e3au9ay/

基本上，在HTML中，执行以下操作，

<div>
    <span style="float: left;">span 1</span>
    <span style="float: right;">span 2</span>
    <span class="centered-span">span 3</span>
</div>

和CSS，

div{
    position: relative;
}
span.centered-span{
    position: absolute;
    left: 50%;
    margin-left: -20.6px; //half of width
}

Answer 4

如果我是你，我会这样做

创建具有相同类别的三个跨度

离。

<span class="spanNext"> Span 1 </span>
<span class="spanNext"> Span 2 </span>
<span class="spanNext"> Span 3 </span>

然后我会在类“spanNext”

上使用以下css

.spanNext{
  float: left;
  width: 30%;
  height: 50px; 
}

这将为所有三个跨度设置一个全局类，所有三个跨度都使用相同的类，它始终向左浮动，直到达到页面结束，因为我使用百分比作为宽度。

现在如果你想为每个跨度添加一个边距作为一个跨度与另一个跨度之间的分隔符/空格，我将包含以下内容

margin-left: 3px; //in the same css of class '.spanNext'

并排除最后一个div也没有剩余边距你应该在css

中包含它

.spanNext:last-child{
     margin-left: 0px !important;
}

如果您正在使用SCSS / SASS {The Best in my Opinion}

.spanNext{
    &:last-child{
       margin-left: 0px !important;
    }
}