CODEWITHSUNDEEP
css
user1822824
user1822824

Reputation: 2498

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:

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

Upvotes: 55

Views: 96508

Answers (12)

JCBiggar
JCBiggar

Reputation: 2507

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/

Upvotes: 55

racitup
racitup

Reputation: 464

How to actually do this:

<div style="position: relative;">
    <p style="position: absolute; left: 0;">Left</p>
    <p style="position: absolute; width: 100%; text-align: center;">Center</p>
    <p style="position: absolute; right: 0;">Right</p>
</div>

Upvotes: 1

Jason C
Jason C

Reputation: 40436

I had a bunch of alignment issues with the other answers here so I came up with yet another way. This HTML:

<div class="aligned">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

With this CSS:

.aligned { position: relative; text-align: center; }
.aligned .left { left: 0; }    /* or >0 for left padding */
.aligned .right { right: 0; }  /* or >0 for right padding */
.aligned .left, .aligned .right {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

Gives left / center / right text on the same line with the following features:

  • Left and/or right divs can be removed (so you can use this for left+center or center+right).
  • Center is centered properly; in the parent rather than between the edges of left/right text. I.e. the left/right content won't affect the center position.
  • Doesn't create any specifically-sized "columns", so you don't have to deal with surprise wordwrapping and stuff. Doesn't use any specific hard-coded sizes.
  • HTML structure is very straightforward. Also, order of divs doesn't matter.
  • All text centered vertically regardless of font family and size. You can tweak the translate y value to align top or bottom baselines to the center line maybe.
  • Parent container stays in flow.
  • Responsive.
  • If you're philosophically minded: Doesn't use any weird CSS kludges like setting table display modes for non-table elements and such. The CSS and HTML are pretty clear and direct.

It has the following quirks, however:

  • Parent div height is determined by center height; so if the left/right font sizes are much larger, or if you omit the center div entirely, you'll have to manually set the parent div height to something reasonable.
  • Doesn't obey left/right parent padding; although it's easy to fix: Just set the explicit left and right positions to the desired padding.

Example below. Hopefully helpful.

/* script isn't needed for layout; it's just for controlling the examples. */
$('.left').text('Left');
$('.center').text('Center');
$('.right').text('Right');

let step = 0;
setInterval(function() {
  step ++;
  let L = "x".repeat(5 - Math.abs((step % 10) - 5));
  let M = "x".repeat(6 - Math.abs((step % 12) - 6));
  let R = "x".repeat(7 - Math.abs((step % 14) - 7));
  $('.left').text(`${L}Left${L}`);
  $('.center').text(`${M}Center${M}`);
  $('.right').text(`${R}Right${R}`);
}, 100);

let fstep = 0;
setInterval(function() {
  fstep ++;
  let L = 50 + (fstep % 3) * 50;
  let R = 150 - (fstep % 3) * 50;
  $('.left').css('font-size', `${L}%`);
  $('.right').css('font-size', `${R}%`);
}, 500);
.aligned { position: relative; text-align: center; }
.aligned .left { left: 0; }
.aligned .right { right: 0; }
.aligned .left, .aligned .right {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

/* rest of this is formatting examples; not needed for alignment. */
.aligned {
  border: 1px solid #888;
  padding: 1em;
  margin: 1em;
}
.left {
  font-family: sans-serif;
}
.center {
  font-family: serif;
}
.right {
  font-family: monospace;
}
<!-- typical -->
<div class="aligned">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

<!-- order doesn't matter -->
<div class="aligned">
  <div class="right"></div>
  <div class="left"></div>
  <div class="center"></div>
</div>
<div class="aligned">
  <div class="center"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>
<div class="aligned">
  <div class="right"></div>
  <div class="center"></div>
  <div class="left"></div>
</div>

<!-- left/right omitted -->
<div class="aligned">
  <div class="center"></div>
  <div class="right"></div>
</div>
<div class="aligned">
  <div class="left"></div>
  <div class="center"></div>
</div>
<div class="aligned">
  <div class="center"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 0

Edsel Ayala
Edsel Ayala

Reputation: 227

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>

Upvotes: 0

Exceptional
Exceptional

Reputation: 17

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

Upvotes: 0

Kaelan Dawnstar
Kaelan Dawnstar

Reputation: 156

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/

Upvotes: 5

Chris Malek
Chris Malek

Reputation: 111

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.

Upvotes: 0

Thameem
Thameem

Reputation: 756

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

Upvotes: 2

Adam111p
Adam111p

Reputation: 3727

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>

Upvotes: 13

Pod
Pod

Reputation: 4139

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.

Upvotes: 20

DRosenfeld
DRosenfeld

Reputation: 117

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.

Upvotes: 2

daniel
daniel

Reputation: 1433

Maybe this works:

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

Upvotes: 2

Related Questions