CSS: Left, Center, & Right Align Text on Same Line

Issue

I need to left, center, & right align text on the same line. I have the following text:

• Left Align: 1/10
• Center: 02:27
• Right Align: 100%

I wrote the following code which works for left and right aligning text but does not work correctly for the center text.

HTML

<div id="textbox">
<p class="alignleft">1/10</p>
<p class="aligncenter">02:27</p>
<p class="alignright">100%</p>
</div>
<div style="clear: both;"></div>

CSS

.alignleft {
    float: left;
}
.aligncenter {
    float: left;
}
.alignright {
    float: right;
}

Solution

Try this

UPDATED

HTML

 <div id="textbox">
   <p class="alignleft">1/10</p>
   <p class="aligncenter">02:27</p>
   <p class="alignright">100%</p>
 </div>
 <div style="clear: both;"></div>​

CSS

.alignleft {
  float: left;
  width: 33.33333%;
  text-align: left;
}
.aligncenter {
  float: left;
  width: 33.33333%;
  text-align: center;
}
.alignright {
 float: left;
 width: 33.33333%;
 text-align: right;
}​

Demo the code here: http://jsfiddle.net/wSd32/1/ Hope this helps!

=======UPDATE 2021:

You can now get the same results using HTML5 Flex to do this. No need for floating or clearing divs. Simply add Display: flex; to the parent container holding the items you wish to position.

HTML

<div id="textbox">
  <p class="alignleft">1/10</p>
  <p class="aligncenter">02:27</p>
  <p class="alignright">100%</p>
</div>

CSS

#textbox {display:flex; flex-flow:row wrap;}

.alignleft {
  width: 33.33333%;
  text-align: left;
}
.aligncenter {
  width: 33.33333%;
  text-align: center;
}
.alignright {
  width: 33.33333%;
  text-align: right;
}

Demo The Result Using Flex: http://jsfiddle.net/jcbiggar1/tsopnf4d/4/

More on Flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answered By - JCBiggar