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

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!

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.

Answer 3

If you are also looking to top, middle, and bottom align text across the same line then one can expand on @Thameem's answer to get an even more complete positioning solution:

<table style="width:100%; height: 100%;">
    <tr>
        <td style="text-align:left; vertical-align: top;">top left</td>
        <td style="text-align:center; vertical-align: top;">top center</td>
        <td style="text-align:right; vertical-align: top;">top right</td>
    </tr>
    <tr>
        <td style="text-align:left; vertical-align: middle;">middle left</td>
        <td style="text-align:center; vertical-align: middle;">middle center</td>
        <td style="text-align:right; vertical-align: middle;">middle right</td>
    </tr>
    <tr>
        <td style="text-align:left; vertical-align: bottom;">bottom left</td>
        <td style="text-align:center; vertical-align: bottom;">bottom center</td>
        <td style="text-align:right; vertical-align: bottom;">bottom right</td>
    </tr>
</table>

With HTML custom elements and a bit of CSS you can optionally make it a bit more readable:

<position>
    <top>
        <left>top left</left><centre>top centre</centre><right>top right</right>
    </top>
    <middle>
        <left>middle left</left><centre>middle centre</centre><right>middle right</right>
    </middle>
    <bottom>
        <left>bottom left</left><centre>bottom centre</centre><right>bottom right</right>
    </bottom>
</position>

And the corresponding CSS:

position {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
}

top {
    display: table-row;
}
top * {
    vertical-align: top;
}

middle {
    display: table-row;
}
middle * {
    vertical-align: middle;
}

bottom {
    display: table-row;
}
bottom * {
    vertical-align: bottom;
}

left {
    display: table-cell;
    text-align: left;
}

centre {
    display: table-cell;
    text-align: center;
}

right {
    display: table-cell;
    text-align: right;
}

Please note the British spelling of "centre" instead of "center" in some places. I am not British but this was done to avoid conflicting with the existing HTML "center" element and its built-in styles. If you happen to know the magic combination of styles to override the "center" element I would be interested to hear.

You can also use this to do fewer positions:

<position>
    <middle>
        <centre>centre</centre>
    </middle>
</position>

But be careful to use the same set of "columns" (left, center, right) between "rows" (top, middle, bottom) since it is technically still a table underneath.

I realize I probably committed a few programming sins with this example:

1. mixing content and layout
2. not namespacing my custom elements (which could involve naming conflicts if the names I chose happen to be used by a library or the HTML/XML spec)
3. not using the more modern flex layout
4. etc.

Please forgive me.

I have found it difficult to achieve similar layout using other solutions. I hope this helps other people struggling with similar requirements.

Answer 4

           <table style="width:100%;">
                <tr>
                    <td style="text-align:left;"><p>left</p></td>
                    <td style="text-align:center;"><p>center</p></td>
                    <td style="text-align:right;"><p>right</p></td>
                </tr>
            </table>

Answer 5

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>

Answer 6

Maybe this works:

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