Reputation: 2498
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
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
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
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:
translate
y value to align top or bottom baselines to the center line maybe.It has the following quirks, however:
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
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
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
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:
Upvotes: 5
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:
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
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
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
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
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
Reputation: 1433
Maybe this works:
p{width:33%;float:left;}
.alignleft{text-align:left;}
.aligncenter {text-align:center;}
.alignright {text-align:right;}
Upvotes: 2