Center a div or span while between other spans - html

Question

I have a div container in which there are already 2 spans: one floating left and one floating right. Now I want to add a third span that will be in the center of the div.
I've tried a ton of things, most promising tracks include things like this on the span that is supposed to be the center one:
position: absolute;
overflow: hidden;
display: inline-block;
margin-left: 0px;
margin-right: 0px;
I've even tried using the tags and coupled it with position:absolute which almost gives what I want except the centered text is on another line.
The left floating element has no styles to it as default is left floating
The right floating element has nothing except:
float:right;

Answer 1

The best way is to put text-align: center to the parent div:
div {
text-align: center;
}
div>span:first-child {
float: left;
}
div>span:nth-child(3) {
float: right;
}
<div>
<span>Left</span>
<span>Center</span>
<span>Right</span>
</div>
JSFiddle

Answer 2

Use auto margin left and right on an element you want to be centered:
margin-left:auto;
margin-right:auto;

Answer 3

If I correctly understood your problem, I have created an example fiddle http://jsfiddle.net/8e3au9ay/
Basically, in HTML, do something like following,
<div>
<span style="float: left;">span 1</span>
<span style="float: right;">span 2</span>
<span class="centered-span">span 3</span>
</div>
and in CSS,
div{
position: relative;
}
span.centered-span{
position: absolute;
left: 50%;
margin-left: -20.6px; //half of width
}

Answer 4

If I were you I would do this
Create Three spans with the same class
ex.
<span class="spanNext"> Span 1 </span>
<span class="spanNext"> Span 2 </span>
<span class="spanNext"> Span 3 </span>
Then I would use the following css on the class "spanNext"
.spanNext{
float: left;
width: 30%;
height: 50px;
}
This would set a global Class for all the three spans all using the same class which will always float left until end of page is reached since I am using percentage as a width.
Now If you want to add a margin to each span as a seperator / space between one span and another I would include the following
margin-left: 3px; //in the same css of class '.spanNext'
and to exclude the last div from having a margin left too You should include this in the css
.spanNext:last-child{
margin-left: 0px !important;
}
and if your are using SCSS / SASS {The Best in my Opinion}
.spanNext{
&:last-child{
margin-left: 0px !important;
}
}