element align

how set the center align of an element box.

the  block elements can be aligned center by setting the left and right margins to "auto".

<html>
      
         <head>
         
        <style type="text/css" >
        
            p.center{ width:200px ;
            
                      border:1px solid pink;
                      
                      height:200px;
                      
                      margin-left:auto;
                      
                      margin-right:auto ;}
                      
         </style>  </head>
         
     <body>
     
        <div>
        
             <p>thsi is the paragraph<p>
             
             <p class="center" > <img src="/center_image.png"/></p>
        
  </div>
  
</body> </html>

left and right align

One method of aligning elements is to use absolute positioning.

<html>
        
        <head>
        
           <style type="text/css" >
           
                     p.right{ width:200px ;
                     
                               border:10px outset #efeffe ;
                               
                               height:200px ;
                               
                               position:relative ;
                               
                               right:2px ;}
                               
        </style></head>
        
  <body>
  
        <div>
        
             <p>thsi is the paragraph<p>
             
             <p class="right" > <img src="images\\image.png"/></p>
        
  </div>
  
</body>    </html>

One method of aligning elements is to the float property.

<html>
        
        <head>
        
          <style type="text/css" >
          
               p.right{ width:200px ;
               
                             border:1px solid pink ;
                             
                             height:200px ;
                             
                             float:right ;
                             
        </style></head>
        
   <body>
   
        <div>
        
           <p>thsi is the paragraph<p>
           
           <p class="right" ><img src="images\\image.png"/></p>
        
    </div>
    
 </body></html>