How to align text in CSS

by Online Tutorials Library July 14, 2022

How to align text in CSS?

The text-align property in CSS is used for the alignment of text. This CSS property is used to set the horizontal alignment of a table-cell box or the block element. It is similar to the vertical-align property but in the horizontal direction.

The text-align property includes values like justify, center, right, left, initial, and inherit. It specifies the horizontal alignment of text in an element.

Syntax

The value justify stretches the content of the element to display the equal width of every line and generally used in magazines and newspapers. The value left aligns the text to the left, whereas the value right is used to align it to the right. The value ,center is used to center the inline text.

Let’s understand it with an example.

Example

In this example, we are using all the values of the text-align property.

  <!DOCTYPE html>  <html>  <head>  <title>text-align property</title>  <style>  h2, h4 {  text-align:center;  }  .main {  border:1px solid black;  margin: 10px;  font-size: 14px;    }  #justify {  text-align: justify;  }  #left {  text-align: left;  }  #right {  text-align: right;  }  #center {  text-align: center;  }  </style>  </head>  <body>  <h2>text-align property</h2>  <div class = “main”>  <h4>text-align: justify;</h4>  <div id = “justify”>  Hi, Welcome to the  tutoraspire.com. This site is developed so that students may learn computer science related technologies easily. The  tutoraspire.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.  </div>  </div>  <div class = “main”>  <h4>text-align: left;</h4>  <div id = “left”>  Hi, Welcome to the  tutoraspire.com. This site is developed so that students may learn computer science related technologies easily. The  tutoraspire.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.            </div>  </div>  <div class = “main”>  <h4>text-align: right;</h4>  <div id = “right”>  Hi, Welcome to the  tutoraspire.com. This site is developed so that students may learn computer science related technologies easily. The  tutoraspire.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.            </div>  </div>  <div class = “main”>  <h4>text-align: center;</h4>  <div id = “center”>  Hi, Welcome to the  tutoraspire.com. This site is developed so that students may learn computer science related technologies easily. The  tutoraspire.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.            </div>  </div>  </body>  </html>  

Test it Now

Output

How to align text in CSS

Next TopicHow to center images in CSS

How to align text in CSS

How to align text in CSS?

Syntax

Example

CSS translate() function

Axis API in D3.js

You may also like