How Do I Perfectly Center a Float Element in Between Two Floated Elements?

I am finding it difficult to center a text in between two other texts.

HMTL :

<div class="main-container">
  <div class="footer">
    <span class="left_edge">@left</span>
    <span class="center">@center</span>
    <span class="right_edge">@right</span>
  </div>
</div>

CSS :

.footer{
  background: #e33;
  padding: 5px;
}
.left_edge{
  float: left;
}
.center{
  float: left;
}
.left_edge{
  float: right;
}

How do I perfectly center the .center as shown in the correctly marked image?

enter image description here


solution

One approach would be to set the display of the middle element to inline-block and then use text-align: center on the parent element for horizontal centering:

Example Here

.footer {
  background: #e33;
  padding: 5px;
  text-align: center;
}
.left_edge {
  float: left;
}
.center {
  display: inline-block;
}
.right_edge {
  float: right;
}

Alternatively, you could avoid floating the elements, and use the following method instead:

Example Here

.footer > span {
  display: inline-block;
  width: 33.333%
}
.left_edge {
text-align: left;
}
.center {
  text-align: center;
}
.right_edge {
  text-align: right;
}