CSS Alignments, TutorialsPoint, CSS Alignments Tutorial

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

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.

CSS Tutorial