HTML or CSS Text Align Property Syntax and Code Example

Ad Banner Image

CSS Text Align Property

CSS Text Align property is used to specify the line alignment of the HTML Elements.

You can set the alignment as right alignment, left alignment, center alignment and justify alignment.

Example 1 – Text Align Property to Change the Alignment of HTML Text

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

	  div.left-align 
	  {
		text-align:left;
	  }

	  div.right-align 
	  {
		text-align:right;
	  }
	</style>
  </head>
  
  <body>
		<h2>Text Align Example</h2>
	
	<div class="center-align">
	<h3> Text-Align Center Example</h3>
	<p>Lorem ipsum aute irure dolor in rep rehe ndedolor sit amet, siat nulla pariatu eddo eiusmod por inci didunt ut labore et.</p>
	</div>
		
	<div class="left-align">
	<h3> Text-Align Left Example</h3>
	<p>Lorem ipsum aute irure dolor in reprehenderit in voluptate vescel erisque in dictum cillum dolore eulit esse cillum.</p>
	</div>
		
	<div class="right-align">
	<h3> Text-Align Right Example</h3>
	<p>Lorem ipsum aliqns ectetur adipi scinguam etiam erat velitllum dolore eu fugnon. Tincidunt ornare massa eget egestas purus dolore eu fugr.</p>
	</div>
  </body>
</html>

In the above code, we define the text-align property to an HTML Element(paragraph element).

CSS Text Align Property Code Example with HTML p and heading elements
Fig.1 – Align Property Code Example with HTML p and heading elements

In the above given code and screenshot shows that how the text-align property works.

If you set text-align:center; than the lines are lies in the center of left and right corner.

If you set text-align:left; than the alignment of lines are towards left side.

Example 2 – HTML Text Alignment justify code with p and heading tags

<!DOCTYPE html>
<html>
  <head>
	<style>
	  div.center-align 
	  {
		text-align:center;
	  }
	  div.justify-align
	  {
		text-align:justify;
	  }
	</style>
  </head>
  
  <body>
		<h2>Align Example</h2>
	
	<div class="center-align">
	<h3> Text-Align Center Example</h3>
	<p>Lorem ipsum aute irure doectetur adipi scin incidunt ornare guam eddo eiusmod por inci etiam eratt, siat nulla pariture et.</p>
	</div>
		
	<div class="justify-align">
	<h3> Text-Align Justify Example</h3>
	<p>Lorem ipsum aute irure eulit esse cillum dolor in rep rehe nded etiam erat velitllum dolore eu olor snulla pariatu eddoeiu. Posuere morbi leo urna molestie. Faucibus nisl tincidunt eget nullam non nisi est sit amet.</p>
	</div>

  </body>
</html>

In the above code, we define the text-align property to an HTML Element(paragraph element).

HTML Text Align Property Syntax and Code Example to justify the Text
Fig.2 – HTML Text Align Property Syntax and Code Example to justify the Text

If you set text-align:right; than the alignment of lines are towards right side.

Similarly if you set text-align: justify; than the alignment of lines are looking like a box or have equal distance from both sides.

Sponsor Banner
You can leave a response, or trackback from your own site.
Leave a Reply to the article


Learn CSS

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!

Powered by Wordpress