Bootstrap <span> align

Question

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

<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 and Text 3 are fine. But I don't get Text 2 to the center

Answer 1

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

.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

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

Answer 3

You can use flexbox:

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

Answer 4

I recommend to use only Bootstrap classes if possible. In this case you can achieve it by adding pull-left and pull-right classes instead of inline floats in first and last <span>, and adding text-center class to your wrapping <div> element. That way you also don't need any inline CSS for 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 floats and Alignment classes for more information about using pull and text classes