如何让跨度边距留在div和vertical-align center旁边？

Question

如何让跨度边距留在div和vertical-align center旁边？

红色框架为div，绿色框架为span。外部div元素是div。

    <div>
      <span style="width: 100%; margin: auto auto auto 0;">0台</span>
    </div>

我尝试使用margin，display:inline-block;都失败了。

我希望span移动到那里：

修改-1

我的div使用Col span属性作为宽度。

<Col :span=8>
  <div>
    <span>...
  </div>
</Col>

Answer 1

请使用display:table和display:table-cell

进行样式设置

<div style="width: 500px;height:200px;display:table;">
          <span style="width:100%; display:table-cell;
          vertical-align:middle;">0台</span>
</div>

Answer 2

使用 flex

为了解目的而创建了一个演示。

div {
  width: 300px;
  height: 200px;
  border: 1px solid;
  display: flex;
  align-items: center;
}
span {
  display: inline-block;
}

<div>
  <span>0台</span>
</div>

Answer 3

请尝试将float：left属性添加到样式中。

<div style="width: 500px;">
      <span style="width:100%; margin: 0 auto auto 0; float: left">0台</span>
</div>