CSS text-alignment

Please Share On:

Definition:

CSS text-alignment property is used to set the text alignment of the horizontal text. Text can be alignments into the left, center, right, and justify.

Syntax:

text-alignment: left;
text-alignment: center;
text-alignment: right;
text-alignment: justify;

See an example of each text-alignment using in a paragraph.

1) text-alignment: left;

Defination:

This text-alignment left property is used to set all the text into the left side of the content. For better understand, see the below source code and output of text-alignment: left.

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
.text-alignment{
  border: 3px solid black;
  text-align: left;
  background-color: pink;
}
</style>
</head>
  
<body>
<div class="text-alignment">In this paragraph, the text alignment is defined at left which makes all the contents of this paragraph starts from the left hand side.<br/>
text-alignment: left;</div> 

</body>
</html>

Output:

2) text-alignment: center;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
.text-alignment{
  border: 3px solid black;
  text-align: center;
  background-color: pink; 
}
</style>
</head>
  
<body>
<div class="text-alignment">In this paragraph, the text alignment is defined at center which moves all the content of this paragraph into the center.<br/>
text-alignment: center;</div> 

</body>
</html>

Output:

3) text-alignment: right;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
.text-alignment{
  border: 3px solid black;
  text-align: right;
  background-color: pink; 
}
</style>
</head>
  
<body>
<div class="text-alignment">In this paragraph, the text alignment is defined at right which moves all the content of this paragraph towards right hand side.<br/>
text-alignment: right;</div> 

</body>
</html>

Output:

4) text-alignment: justify;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
.text-alignment{
  border: 3px solid black;
  text-align: justify;
  background-color: pink; 
}
</style>
</head>
  
<body>
<div class="text-alignment">In this paragraph, the text alignment is defined at justify which means that the each single line of the paragraph starting point is left hand side and ending point is right hand side. See the each line of this paragraph. It starts from left hand side and go all the way through right hand side.<br/>
text-alignment: justify;</div> 

</body>
</html>

Output:

You may be interested in the following topics:

Post Views: 554

Definition:

1) text-alignment: left;

2) text-alignment: center;

3) text-alignment: right;

4) text-alignment: justify;

Leave a Reply Cancel reply

Copyright @2023. All Right Reserved.