CSS Alignments
CSS has several properties that can be used to align elements on web pages. Ex : Text Alignment, Image Alignments, Center Alignments, Left and Right Alignments etc,.
Text Alignment
<!DOCTYPE html>
<html lang="en">
<head>
<title>Text Alignment</title>
<style type="text/css">
  p.text_left{ text-align:left;}
  p.text_center{ text-align:center;}
  p.text_right{ text-align:right;}
</style>
</head>

<body>
 
  <h4>Text Alignment</h4>
  <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>
 
</body>
</html>
Output :

Text Alignment

This is text "Left alignment".

This is text "Center alignment".

This is text "Right alignment".

Image Alignment
<!DOCTYPE html>
<html>
<head>
<title>Image Alignment</title>
<style>
   img {
       display: block;
       margin:0px auto;
      }
</style>
</head>

<body>
 
  <h2>Image Alignment</h2>
  <p>This image is Center</p>
  <img src="images/background_images.jpg" alt="Free Time Learning" />
 
</body>
</html>
Output :

Image Alignment

This image is Center

Free Time Learning
Center Alignment
<!DOCTYPE html>
<html>
<head>
<title>Center Alignment</title>
<style type="text/css">
div{
width: 50%;
margin: 0 auto;
padding: 15px;
font-size:26px;
background: #9C0;
}
</style>
</head>
<body>
 
<div>Center Alignment</div>
 
</body>
</html>
Output :
Center Alignment
Left and Right Alignment
<!DOCTYPE html>
<html lang="en">
<head>
<title>Left and Right Alignments with CSS floating</title>
<style type="text/css">
    div {
        width: 150px;
        padding: 10px;
        color:#FFF;
        font-size:18px;
    }
    div.left_alignment {
        float: left;       
        background: #F60;
    }
    div.right_alignment {
        float: right;
        background:#9C0;
    }
</style>
</head>

<body>

    <div class="left_alignment">left align.</div>
    <div class="right_alignment">right align.</div>

</body>
</html> 
Output :
left align.
right align.

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.