Menu
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
933
Text Align To center an inline element like a link or a span or an img, all you need is text-align: center . For multiple inline elements, the process is similar. It's possible by using text-align: center .
Make sure you set a width on your col class, then text-align should work. Has to know where to center first. <span> elements will only be as wide as the content contained within. Changing to <div> will allow you to center the text because the <div> element will fill all of the space provided by it's parent.
If you want to align a <span> element to the right of the <div>, you can use some CSS. Particularly, you need to use the float property with the “right” and “left” values.
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>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;
}
You can use flexbox:
.panel-footer{
display: flex;
justify-content: center;
}
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
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
