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

1/10
02:27
100%


 

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/