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

Question

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; } 

Answer 1

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/

Answer 2

The magic HTML5 way that works responsively is to use flex:

<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

#textbox {     display: flex;     justify-content: space-between; } 

Demo:

http://jsfiddle.net/sep4kf6a/1/

You'll find it avoids the awkward box wrapping that occurs with floats on a small screen.