How May I Align Text to The Left and Text to The Right in The Same Line

How may I align text to the left and text to the right in the same line?

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

Left and Right align text on the same line

You can easily maintain the alignment, and replace the <hr> elements by using the div's border, looks a bit cleaner:

<style>  div {    border-top: 1px solid gray;    border-bottom: 1px solid gray;    display: flex;    justify-content: space-between;    width: 800px;  }</style><div>  <p>To Left: 1024-0038</p>  <p>To Right: 01-15-131194</p></div>

CSS: Left-align and right-align text on the same line

This is exactly what the float property is for. Use float: right inside the rule of that element. You can learn more about the float property at MDN's article

right

The element must float on the right side of its containing block.

Float makes text wrap around an image or other element.

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

Align text to the left and right on the same line with CSS

Try to use span and then set the style equals 'float:right'

<span style="float:right">pending </span>

HTML align text left and right on same line

You have to convert this line:

my $filestat = '<div style="text-align:left;">' . "$filename" . '</div><div style="text-align:right;">' . "$date" . '</div>';

To:

my $filestat = '<div class="filename">' . "$filename" . '</div><div class="date">' . "$date" . '</div>';

And add the following css:

.filename {
  display: inline-block;
  width: 30%;
}
.date {
  display: inline-block;
  width: 70%;
}

HTML5 Have left aligned text and right aligned text in same line within paragraph

You can't do that without an additional tag, but what you can do is inject a <span> tag within a <p> tag, and give each <span> a respective float: left and float: right:

<p style="margin-left: 75px; max-width: 750px;">  <span style="float: left">This is a test.</span>  <span style="float: right">[Rare photograph]</span></p>

I want different text in the same line positioned to the left and right inside a table cell

I dont know why you are using floats for a table, but still, the solution to your problem is simple. Just add this to your css and you are good to go.

.classroom{
    text-align: right;
    float: right;
    position: relative;
    top: -15px;
}
.group{
    text-align: left;
    float: left;
    position: relative;
    top: -15px;
}

How did this solve the problem?
--> It's simple, you are setting the positions of those two elements to be relative, and then change the top to -15px so the text goes 15px above its original position.

Also, if you want to change how high the elements should go, just change the top: ; value to whatever you like.

---

Related Topics