<!DOCTYPE html>
<html>
	<head>
    	<title>CSS Alignments</title>
    </head>
    <body>
    	
         <style type="text/css">
		 
		  p.text_left{ text-align:left;}
		  p.text_center{ text-align:center;}
		  p.text_right{ text-align:right;}
		  
		  img {
		   display: block;
		   margin:0px auto;
		  }
		  
		  .main_div{
			width: 50%;
			margin: 0 auto;
			padding: 15px;
			text-align:center;
			font-size:26px;
			background: #9C0;
			color:#FFF;
			}
			
		  .align_l_r{
				width: 150px;
				padding: 10px;
				color:#FFF;
				font-size:18px;
				margin-bottom:20px;
			}
		  .left_alignment {
				float: left;       
				background: #F60;
			}
		  .right_alignment {
				float: right;
				background:#9C0;
			}
		 </style>
		 
		  <h3>Text Alignment</h3>
		  <p class="text_left">This is text "Left alignment".</p>
		  <p class="text_center">This is text "Center alignment".</p>
		  <p class="text_right">This is text "Right alignment".</p>
		  
		  <br /><hr /><br />
        
		  <h3>Image Alignment</h3>
		  <p>This image is Center</p>
		  <img src="images/background_images.jpg" alt="Free Time Learning" />
		  
		  <br /><hr /><br />
		  
		  <div class='main_div'>Center Alignment</div>
		  
		  <br /><hr /><br />
		  
		  <div class="align_l_r left_alignment">left align.</div>
		  <div class="align_l_r right_alignment">right align.</div>
		  
    </body>
</html>

Output :

Topic : Alignments