text-align Archives - Lena Design

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

To align the text that some of it aligns to the left and some of it aligns to the right within the same line check the options below:

Option1.

Align the text in HTML using the CSS text-align property and CSS float property.

Add the text to the code:

<!DOCTYPE html>
<html>
<body>

<p style="text-align:left;">
    This text is on the left side.
<span style="float:right;">This text is on the right side.</span>
    </p>

</body>
</html>

Output:

This text is on the left side. This text is on the right side.

Option2

Align the text using HTML and CSS

<!DOCTYPE html>
<html>
    <head>
        <style>
            .right{
    float:right;
}

.left{
    float:left;
}
        </style>
    </head>
<body>

<span class="right">This text is on the right side.</span><span class="left">This text is on the left side.</span>

</body>
</html>

Output:

This text is on the right side.This text is on the left side.

Option3

Create the single row table and add the right float on the second cell:

<!DOCTYPE html>
<html>
    <head>
        <style>
.alignRight {
    float: right;
}
        </style>
    </head>
<body>

<table style="width: 100%;">
  <tr><td>This text is on the left side.</td>
  <td class="alignRight">This text is on the right side.</td></tr>
</table>

</body>
</html>

Output:

This text is on the left side.

This text is on the right side.

Enjoy coding!

Read also:

CSS Float Tutorial

CSS Styling Links

CSS Shadows

The CSS text-align property defines the horizontal alignment of text in an element.

Demo:

Syntax:

text-align: left|right|center|justify;

left – aligns the text to the left.

right – aligns the text to the right.

center – centres the text.

justify – stretches the lines so that each line has equal width.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
} 

.justify {
  text-align: justify;
} 
</style>
</head>
<body>

<div class="center">
<h4>text-align: center;</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</div>

<div class="left">
<h4>text-align: left;</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</div>

<div class="right">
<h4>text-align: right;</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</div>

<div class="justify">
<h4>text-align: justify;</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</div>

</body>
</html>

Output:

text-align: center;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

text-align: left;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

text-align: right;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

text-align: justify;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

Enjoy coding!