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

Question

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

的中心

我已经尝试了很多东西，最有前途的曲目在应该是中心的跨度上包括这样的东西：

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

我什至尝试过使用标签并将其与 position:absolute 结合使用，这几乎提供了我想要的内容，除了居中文本在另一行。

左浮动元素没有样式，默认为左浮动右边的浮动元素除了：

什么都没有

float:right;

Answer 1

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

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

Answer 2

如果我正确理解了您的问题，我已经创建了一个示例 fiddle 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 3

最好的方法是把text-align: center放到parent 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>

Answer 4

如果我是你我会这样做

创建三个相同的 span class

例如。

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

然后我会在 class "spanNext"

上使用以下 css

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

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

现在，如果您想为每个跨度添加一个边距作为分隔符/space，我会在一个跨度和另一个跨度之间添加以下内容

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

并排除最后一个 div 也有余量您应该将其包含在 css

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

如果您使用的是 SCSS / SASS {我认为最好的}

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

Center a div or span while between other spans