Categories
CSS Web development

CSS text-align Property

CSS text-align Property

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!

Read also:

CSS Fonts

HTML Text Formatting And Styles

CSS align-content Property