html - Bootstrap 对齐

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 放到中心

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>