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>

Answer 2

如果可能，我建议使用仅Bootstrap类。在这种情况下，您可以通过在第一个和最后一个pull-left中添加pull-right和<span>类而不是内联浮点数来实现它，并在包装text-center中添加<div>类元素。这样，您也不需要中间<span>的任何内联CSS。

完整的工作代码如下所示：

＆＃13;

<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>

＆＃13;

查看有关Quick floats和Alignment classes的Bootsrap文档，了解有关使用pull和text类的更多信息

Answer 3

您可以使用flexbox：

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

Answer 4

将justify-content: space-between;与flexbox

一起使用

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

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

或者你可以简单地使用bootstrap网格和几个类。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="panel-footer">
  <div class="row">
    <span class="col-xs-4">Text 1</span>
    <span class="col-xs-4 text-center">Text 2</span>
    <span class="col-xs-4 text-right">Text 3</span>
  </div>
</div>

Answer 5

您可以尝试这样的事情：

＆＃13;

.panel-footer span{
  width: calc(100%/3);
  float: left;
  text-align: center;
}

.panel-footer span:first-child{
  text-align: left;
}

.panel-footer span:last-child{
  text-align: right;
}

＆＃13;

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

＆＃13;

Answer 6

您可以使用以下选项

<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;
}

Bootstrap <span> align

6 个答案: