Html Bootstrap <span> 对齐

Bootstrap <span> align

提问by modsfabio

I have the following piece of code and want to align Text 2to the center of the footer.

我有以下一段代码，并希望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 1and Text 3are fine. But I don't get Text 2to the center

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

回答by Sankar

Try this...

尝试这个...

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

Or you can use flexbox

或者你可以使用 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>

回答by Wilq

I recommend to use only Bootstrap classesif possible. In this case you can achieve it by adding pull-leftand pull-rightclasses instead of inline floats in first and last <span>, and adding text-centerclass to your wrapping <div>element. That way you also don't need any inline CSS for middle <span>.

如果可能，我建议只使用Bootstrap 类。在这种情况下，您可以通过在 first 和 last 中添加pull-left和pull-right类而不是内联浮动来实现它，并将类<span>添加text-center到您的包装<div>元素。这样你也不需要任何内联 CSS 的 middle <span>。

The full working code will look like this:

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

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

Check Bootsrap documentation about Quick floatsand Alignment classesfor more information about using pull and text classes

查看有关快速浮动和对齐类的Bootsrap 文档，了解有关使用拉取和文本类的更多信息

回答by Farzin Kanzi

You can use flexbox:

您可以使用弹性盒：

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

回答by Abhishek Pandey

Use justify-content: space-between;with flexbox

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

or you can simply use bootstrap grid and few classes.

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

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

回答by Cyril Beeckman

You can try something like this :

你可以尝试这样的事情：

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

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

回答by Super User

You can use following options

您可以使用以下选项

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

Or

或者

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