Question

[Solved] 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;
}

Solution #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/

Respondent: user1822824

Solution #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.

Respondent: JCBiggar

Solution #3:

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>

Respondent: Pod

Solution #4:

Maybe this works:

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

Solution #5:

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/

Respondent: daniel

Solution #6:

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.

Respondent: Kaelan Dawnstar

Solution #7:

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

Respondent: DRosenfeld

Solution #8:

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.

Respondent: Thameem

Solution #9:

If anyone is looking for an inline CSS. The code is below. This helped me fix it for mobile.

<div style="display: flex; justify-content: flex-start; flex-flow:row wrap; height: 0px;">
Respondent: Chris Malek

Solution #10:

here is my simple code

<div style="display: flex;">
  <span style="margin-right: auto">left</span>
  <span>center</span>
  <span style="margin-left: auto">right</span>
</div>

Respondent: Exceptional

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Most Popular

To Top
India and Pakistan’s steroid-soaked rhetoric over Kashmir will come back to haunt them both clenbuterol australia bossier man pleads guilty for leadership role in anabolic steriod distribution conspiracy