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
• R

Answer 1

Improvement on Pod's answer:

#textbox {
    display: flex;
}
.alignleft {
    flex: 1;
    text-align: left;
}
.aligncenter {
    flex: 1;
    text-align: center;
}
.alignright {
    flex: 1;
    text-align: right;
}

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

 

This avoids the awkward box wrapping that occurs with floats on a small screen, as well as centering the middle text, in the middle of #textbox.

JSFiddle:

http://jsfiddle.net/secnayup/

Answer 2

A variation of JCBiggar's great solution is to skip the width and text-align for .alignright, but simply to float it to the right. The advantage of this is that it removes the concern that the inner elements have set margins or paddings, making the 33.33% * 3 exceed the 100% width of the containing element. The desired placement of .alignright can be effected much more simply.

The CSS would then be:

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

This worked well for me when I had elements which required paddings of set amounts (and could not be represented as percentages) - as shown above in the CSS.