Bootstrap <span> 对齐

Question

我有以下代码，想要将 Text 2 对齐到页脚的中心。

 <div class="panel-footer">
    <span style="float:left;">
        Text 1
    </span>
    <span style="width: 100%;text-align: center">
        Text 2
    </span>
    <span style="float:right;">
        Text 3
    </span>
</div>

Text 1 和 Text 3 很好。但我没有得到 Text 2 到中心

原文由 modsfabio 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

试试这个…

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel-footer text-center">
    <span class="pull-left">
        Text 1
    </span>
    <span >
        Text 2
    </span>
    <span class="pull-right">
        Text 3
    </span>
</div>

或者你可以使用 flexbox

 .panel-footer {
  display: flex;
  justify-content: space-between;
}

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel-footer">
  <span>
        Text 1
    </span>
  <span>
        Text 2
    </span>
  <span>
        Text 3
    </span>
</div>

原文由 Sankar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以使用以下选项

<div class="panel-footer text-center">
    <span style="float:left;">
        Text 1
    </span>
    <span style="display: inline-block;text-align: center">
        Text 2
    </span>
    <span style="float:right;">
        Text 3
    </span>
</div>

要么

<div class="panel-footer">
    <span>
        Text 1
    </span>
    <span>
        Text 2
    </span>
    <span>
        Text 3
    </span>
</div>

.panel-footer {
  display: flex;
  justify-content: space-between;
}

原文由 Super User 发布，翻译遵循 CC BY-SA 3.0 许可协议