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

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

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/

Left-, center-, and right-aligned text on the same line

You will need to "trick" the left column into being as wide as the right, by copying the text from the right into the left column. Why? When the center column needs to wrap in order to maintain center with respect to the whole table it will need to wrap as if both other columns are the same width. You can see this here: http://jsfiddle.net/brettwp/n5eSB/ by adjusting the size of the Result panel. Note that this does make your table one line taller due to the hidden content. I don't know all the details of your implementation, so you will need to make adjustments (overflow hidden, negative margins, position relative, etc) to get this to fit into the page, but it should get you started:

<table>
    <tr>
        <td class="d1">
            left
            <div class="copy">right text</div>
        </td>
        <td class="d2">
            center text that is long enough to force a word wrap!
        </td>
        <td class="d3">right text</td>
    </tr>
</table>

table {
    width: 100%;
}
td {
    vertical-align: top;
}
.d1 {
    text-align: left;
}
.d2 {
    text-align:center;
}
.d3 {
    text-align:right;
}
.copy {
    visibility: hidden;
}
.copy, .d3 {
    white-space: nowrap;
}

HTML/CSS - Left Align and center on same line

Use like this

<div id="wrapper">
  <h1 class="align-left">LEFT</h1>
  <h1 class="align-center">CENTER</h1>
</div>
<style>
h1.align-left {
    text-align:left;
    padding:0;
    margin:0;
    position:absolute;
}

h1.align-center{
  text-align: center;
}
</style>

Other way:

<div id="wrapper">
  <h1 class="align-left">LEFT</h1>
  <h1 class="align-center">CENTER</h1>
</div>
<style>
h1.align-left{
    padding:0;
    margin:0;
    position:absolute;
}
#wrapper {
    text-align:left;
}

h1.align-center{
  text-align: center;
}
</style>

Left, center, and right align divs on bottom of same line

By setting your container div to position:relative and the child divs to position:absolute you can absolute position the divs within the confines of the container.

This makes it easy, as you can use bottom:0px to align all vertically to the bottom of the container, and then use left/right styling to position along the horizontal axis.

I set up a working jsFiddle: http://jsfiddle.net/Damien_at_SF/KM7sQ/5/ and the code follows:

HTML:

<div id="container">
    <div id="left">left</div>
    <div id="center">center</div>
    <div id="right">right</div>    
</div>

CSS:

#container {
    position:relative;
    height:400px;
    width:100%;
    border:thick solid black;
}
#container div {
    background:grey;
    width:200px;
}
#left {
    position:absolute;
    left:0px;
    bottom:0px;
}
#center {
    position:absolute;
    left:50%;
    margin-left:-100px;
    bottom:0px;
}
#right {
    position:absolute;
    right:0px;
    bottom:0px;
}

Note: For the "center" div, the margin-left = 1/2 the width of the div :)

Hope that helps :)

center one image, and right align another, in the same line

instead of float right, try

position: absolute; and right: 0;

and on .column :

position: relative;

Left, center, and right text

I found a very good way to do this that works even if one or more of the paragraphs will span over multiple lines.

<p style="float: left; width: 33.3%; text-align: left">Page Statistics</p>
<p style="float: left; width: 33.3%; text-align: center;">© 2010</p>
<p style="float: left; width: 33.3%; text-align: right;"><a>Email me</a></p>

I am trying to center a heading and then on the same line have a button on the right

Use float:right to align button at the right position, and text-align in the parent div to make heading text at the center.

.headBar {  background-color: #828282;  text-align: center;}.heading {  display: inline;}.button {  display: inline-block;  background-color: black;  color: white;  float: right;  right: 10px;  top: 10px;  position: relative;}

<div class="headBar">  <h1 class="heading">Heading</h1>  <button class="button">button</button></div>

<p style="text-align:left;">    This text is left aligned    <span style="float:right;">        This text is right aligned    </span></p>