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

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

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/

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.

And now a fresh, quite different approach.

.same-line {
    height: 10px; /*childrens it's all absolute position, so must set height*/
    position: relative;
}
.same-line div{
    display: inline-block;
    position: absolute;
}
.on-the-left{
 left:0px;
}
.on-the-center{
    left: 0%;
    right: 0%;
    text-align: center;
}
.on-the-right{
   right: 0px;
}

<div class="same-line">
    <div class="on-the-left" >it's Left</div>
    <div class="on-the-center" >this Centrer bla bla bla</div>
    <div class="on-the-right" >it's Right</div>
  </div>

Maybe this works:

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

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/

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

Related

Recent Posts