How do I ideally center a floating element between two floating elements?

Question

I find it difficult to center the text 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 ideally center .center as shown in a correctly marked image?

Answer 1

One approach would be to set the display middle element to inline-block , and then use text-align: center in 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 can avoid floating 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; }