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

by

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/

More Related Contents:

  1. Dynamic news paper layout using asp.net C# web form
  2. How can I center an absolutely positioned element in a div?
  3. Flex-box: Align last row to grid
  4. Does the order of classes listed on an item affect the CSS?
  5. Customizing Bootstrap CSS template
  6. Specificity of inherited CSS properties
  7. CSS styling in Django forms
  8. CSS 3 slide-in from left transition
  9. Change color and appearance of drop down arrow
  10. Inset border-radius with CSS3
  11. Single huge .css file vs. multiple smaller specific .css files? [closed]
  12. Select all child elements recursively in CSS
  13. Why doesn’t the selector h3:nth-child(1):contains(‘a’) work?
  14. CSS div element – how to show horizontal scroll bars only?
  15. How do I center an SVG in a div?
  16. CSS3 Spin Animation
  17. Prevent that a fixed element resizes when zooming on touchscreen
  18. What is the difference between pipe (|) and caret (^) attribute selectors?
  19. Are flex items block level element?
  20. Bootstrap change order of columns
  21. The use of /deep/ and >>> in Angular 2
  22. How to make the overflow CSS property work with hidden as value
  23. Why would font names need quotes?
  24. Need to remove href values when printing in Chrome
  25. What does .container.\31 25\25 mean in CSS?
  26. CSS3 – 3D Flip Animation – IE10 transform-origin: preserve-3d workaround
  27. Are there any good reasons for using hex over decimal for RGB colour values in CSS?
  28. minmax fails (invalid property value)
  29. Div with cut out edges, border and transparent background
  30. Select specific element before other element

Leave a Comment